CSS选择器(一)

CSS选择器包括标签选择器、ID选择器、类选择器、伪类和伪对象选择器、子选择器、相邻选择器、属性选择器、通用选择器、包含选择器、分组选择器、指定选择器等选择器，分为标签选择器、ID选择器、类选择器、特殊选择器这四类。

 

以下是我总结的5种常用的CSS选择器。

 

1、标签选择器

eg:  p{ color:#333; }

       a{ display:block; }

优点：能快速为页面中同类型的标签统一样式。

缺点：不能设计差异化的样式，有时会造成样式的相互干扰。

 

2、ID选择器

eg:  #nav{ margin:0px; padding:10px; }

解释说明： '#' 为ID选择符前缀

                   'nav' 为ID名称

元素的ID名称是唯一的，只能对应文档中的一个元素。

适用范围：在页面中唯一、固定、不会重复出现的对象，如导航栏等。

 

3、类选择器

eg:  .col{ }

解释说明： '.' 为类选择符前缀

                   'col' 为类名

适用范围：类样式可应用于文档中的多个元素。

特性：①使用类选择器前，需在HTML文档中为要应用类样式的元素定义相应的class属性；

           ②有较好的灵活性，可指定类样式应用的元素对象范围。

比较：在同等条件下，ID选择器的优先权比类选择器更大。

 

4、伪类和伪对象选择器

eg:  a:hover{ font-weight;bold; }

解释说明： 'a' 为指定标签名

                   '：' 为伪类或伪元素标识符

                   'hover' 为伪类或伪元素名

适用范围：用以选择特殊状态或特殊区域下的元素。

6种常用伪类选择器如下表所示：

伪类	说明
:focus	定义对象在成为输入焦点时的样式
:link	定义未访问过的超链接样式
:visited	定义访问过的样式
:hover	定义鼠标经过的样式
:active	定义鼠标按下的样式
:first-child	定义对象的第一个子对象的样式

“：link”、“:visited”、“:hover”、“:active”这4个链接伪类选择器联合使用时，要注意使用顺序，错误的顺序会使超链接样式失效。

eg:   a{ text-decoration:none; }

        a:link{ color: black; }

        a:visited{ color: red; }

        a:hover{ color: blue; }

        a:active{ color: grey; }

关于":link"伪类，有些浏览器会把它解析为任何超链接，即它既可以是访问过的，也可以是未访问的。故有时可用a选择器样式来替代a:link选择器样式。

注意：在IE浏览器中，是用于超链接相关的伪类选择器时应为a元素定义href属性，否则会失效，但在其他浏览器中则可用无需为a元素定义href属性。

 

5、子选择器

eg:   div>a{ color:#fff; }

解释说明： 'div' 为父级选择符名

                   '>' 为子选择符标识符

                   'a' 为子级选择符名

注意：①子选择器中所控制的元素只能是‘>’符号前面所指定对象的子元素。