CSS选择器（二）

• 派生选择器（或后代选择器）。
  

派生选择器用于选取元素内部的元素。

实例

选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：

1. div  p
   
2. { 
   
3. background-color:yellow;
   
4. }

复制代码

网页中常用的标签种类不是很多，而一个标签可能会被用在网页的各个地方，并且标签选择器的范围一般是比较大的，而使用类别比较麻烦。那如何给网页中不同位置的同一个标签定义不同样式？例如美食网中左侧列表与右侧列表不同。

例5：

定义方法：

1. #left ul{}
   
2. #right ul{}

复制代码

• 指定标签。
  

加强标签选择器的精确度。

如h1.abc{}表示针对所有引用class=abc的h1进行定义，注意区别于h1 .abc

实例

为.red类，指定a标签。

1. <font face="微软雅黑">a.red{color:red;}
   
2. <a href="#" class="red">红字</a><!--红色-->
   
3. <b  class="red">红字</b><!--无效，因为.red指定了a标签--></font>

复制代码

• 通配选择器。
  

可以使用模糊指定的方式来对对象进行选择。

* 选择器选取所有元素。

* 选择器也能选取另一个元素中的所有元素：

如#content *{ font-size：14px} 指#content下的所有子元素字体大小都为14px；

如*{ color:#ff0000}表示，所有的HTML标签内的文字颜色都为红色。

• 子选择器。
  

用于选取带有特定父元素的元素。

*注释：如果元素不是父元素的直接子元素，则不会被选择。<=IE6不支持

实例

选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：

1. div>p
   
2. { 
   
3. background-color:yellow;
   
4. }

复制代码

• 属性选择器。
  
  

依据标签属性来选择标签元素，<=IE6不支持

实例

1. HTML：
   
2. <h1>标题</h1>
   
3. <h1 title="head">标题</h1>
   
4. <h1 title="head2" align="center">标题</h1>

复制代码

1. CSS：
   
2. h1[title]{color:red}/*第二个第三个h1字体为红色*/
   
3. h1[title="head"]{color:green}/*第二个h1字体为绿色*/
   
4. h1[title="head2"][align="center"]{color:blue}/*第三个h1字体为蓝色*/

复制代码