CSS选择器专题

1、元素选择器

div {

            background-color: #/* fff */;

 }

2、类选择器

.class

.intro

选择 class="intro" 的所有元素。

3、子选择器

element element	div p	选择 <div> 元素内的所有 <p> 元素。儿子辈孙子辈都会选。
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。只会选儿子辈，孙子辈不选。

4、链接选择器（注意声明的时候按照LVHA的顺序）

:link

a:link

选择所有未访问过的链接。

:visited

a:visited

选择所有已访问的链接。

 

:hover

a:hover

选择鼠标指针位于其上的链接。

:active

a:active

选择活动链接。鼠标按下未弹起的状态。

5、伪元素选择器

::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。

6、id选择器

#id

#firstname

选择 id="firstname" 的元素。

7、并集选择器

 div, span {

            background-color: #/* fff */;

 }

用逗号链接两个选择器即可。

8、焦点选择器

:focus

input:focus

选择获得焦点的 input 元素。

9、权重计算

对于同一个元素设置的同一种样式，权重高的样式会覆盖权重低的样式。

1. 内联样式，如: style="..."，权值为1000。
2. ID选择器，如：#content，权值为0100。
3. 类，伪类、属性选择器，如.content，权值为0010。
4. 类型选择器、伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等。如* > +，权值为0000。
6. 继承的样式没有权值

7. !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。IE6支持性略差。

   1 2 3 4

   <style>     p{color:red !important;} </style> <p style="color:blue;">我显示红色</p>

10、更多选择器参考：CSS 选择器参考手册