CSS选择器总结_html/css_WEB-ITnose

1.通配选择器

匹配所有元素

　　*{color:red;}

2.标签选择器

匹配所有p元素

　　p{color:red;}

3.ID选择器

匹配ID="div1"的元素

　　#div1{color:red;}

4.类选择器

匹配class="red"的元素，CSS和HTML对大小写不敏感，但ID是大小写敏感的。

　　.red{color:red;}

应用多个class，类名中间用空格隔开，class="red green"。元素将应用red和green的所有规则，重复规则只有一个生效，但不取决于class中类名顺序，而是CSS定义的顺序。

 1  2  3  4  5 14 15 16     
div1
17     
div2
18     
div3
19 20 

效果：

若将样式改为：

1 

效果为：

多类选择器，匹配class同时有多个特定类名的元素，优先级高于单类选择器，同样类名顺序无影响。

 1 

效果：

5.属性选择器

匹配有某属性的元素

　　[attr]{color:red;}

匹配有某属性且属性值等于特定值的元素

　　[title="div1"]{color:red;}

 1  2  3  4  5 13 14 15     
div1
16     
div2
17 18 

效果：

其他属性选择器：

[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

6.后代选择器与子元素选择器

后代选择器

　　div span{color:red;}

子元素选择器

　　div>span{color:red;}

使用以上选择器组合，后代选择器匹配特定父元素内的所有子孙元素，而子元素选择器匹配特定父元素内的一代子元素（不包括孙辈）。

 1  2  3  4  5 18 19 20     
21         div的子元素span122     
23     
24     
25         div的子元素span226         
27             p的子元素、div的孙元素span328         
29     
30 31 

效果：

7.相邻兄弟选择器

匹配相邻下一个兄弟元素

　　div+span{color:red;}

 1  2  3  4  5 16 17 18     
div1
19     div1的邻居span120     21     
div2
22     
div2的邻居pp的子元素span2
23     p的邻居span324 25 

效果：

8.逗号选择器

匹配多个选择器组合的结果

　　h1,span{color:red;}

 1  2  3  4  5 10 11 12     
h1
13     span14 15 

效果：

9.伪类选择器

锚伪类，专门针对锚元素a的各个状态

a:link{...}

a:visited{...}

a:hover{...}

a:active{...}

定义时，hover必须在link和visited之后，active必须在hover之后。

:first-child伪类选择第一个元素

:last-child伪类选择最后一个元素

:nth-child(n)伪来选择第n个元素

:nth-last-child(n)伪类选择倒数第n个元素

:first-line伪类选择文本首行

:first-letter伪类选择文本首字

:before伪类在元素内容前插入新内容

:after伪类在元素内容后插入新内容

 1  2  3  4  5 13 14 15     
div
16     span17 18 

效果：

还有几个不太常用的CSS3伪类选择器没有例举，有时间补齐。

这种选择法与JQuery中的选择器非常非常类似，可见JQuery之基础选择器。