CSS派生选择器

功能：

　在css中，需要根据类名、对象ＩＤ、元素名进行定位的情况下，可以使用派生选择器进行定位！

语言基础总结：
１. 　在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后，
２.　在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前
３.　中间的空格表示后代元素

例子：

/*作为 h1 元素后代的任何 em 元素，不管中间是否还有其它元素隔开*/

h1 em {color:red;}

以下html起作用：

<h1>dfadf<em> test </em></h1>

<h1>dfadf<span>dfdf<em> test </em>dfd</span></h1>

说明，如果只想直接在h1下面的em起作用，则应用使用子元素选择器 “>"

则css写法为：

h1 > em {color:red;}

 

/*div 元素,并class为sidebar,*/

div.sidebar {background:gray;} 

以下html起作用：

<div class="sidebar"> 说明元素和类名的使用　
</div>

 

/*div 元素,并class为sidebar, 下面的任何span*/
div.sidebar span {color:red;}

以下html起作用

<div id="obj1"> 说明元素和对象ＩＤ的使用
<span class=" STYLE2"><em>eddd</em>eddd</span></div>

/*div 元素,并class为sidebar,*/
div#obj1 {background:blue;} 

以下html起作用

<div id="obj1"> 说明元素和对象ＩＤ的使用
<span class=" STYLE2"><em>eddd</em>eddd</span></div>

/* 类名和对象名混合用，对象为obj2的div 下面的具有child属性的span*/
div#obj2 span.child1{
 background:#996600;
}

 

 

以下html起作用

<div id="obj2"> 说明元素和类名和对象ＩＤ共同使用
<span >这个span不起作用</span>
<span class="child1 ">这个span起作用</span>
</div>

/*对象ＩＤ为obj3并且类名为obj3c的div,对象名和类名前后顺序均可，但元素名div一定是前面*/
div.obj3c#obj3{
background:#996699;
}

以下html起作用

<div id="obj3" class="obj3c"> 区别１ 含类名，这个起作用
</div>
<div id="obj3"> 区别２　不含类名，这个不起作用
</div>

 

 

 

除了以上选择器，还有

　

 /*属性选择器*/
 /*对具有alt属性的img元素进行设置*/
 　　img[alt] {border: 5px solid red;}　
 　 a[href] {color:red;}
 　
 /*兄弟选择器：即具有同样的父元素，紧跟其后的元素称为兄弟，使用“+“号表示*/
 /* 对li后面的li　粗体显示*/
 li + li {font-weight:bold;}
 
 /* 伪类　:focus　:hover :first-child*/
 
  input:focus{
 background-color:#0066FF;
 }
 input:hover{
 background-color:#FF0000;
 }
/*first-child应用，比较易误解*/
　p:first-child {font-weight: bold;}
　li:first-child {text-transform:uppercase;}

 

原文地址：http://blog.csdn.net/hongbinchen/article/details/6898160