CSS选择器

选择器汇总

基本选择器

1.通用选择器 *

2.元素选择器 

3.id选择器 #id

4.类选择器 .class

类选择器可以应用到一到多个元素

类选择器可以通过 元素.class 的方式限定样式作用范围

class="class1 class2" 的方式可以给一个元素引用多种样式

5.属性选择器

5.1直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的

属性选择器。

[href]

5.2匹配属性值的属性选择器。

[type="password"]

5.3属性值开头匹配的属性选择器

[href^="http"]

5.4属性值结尾匹配的属性选择器。

[href$=".cn"]

5.5属性值包含指定字符的属性选择器。

[href*="baidu"]

5.6属性值具有多个值时，匹配其中一个值的属性选择器

<p class="abc def">

[class~="def"]

5.7属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<i lang="en-us">HTML5</i>

[lang|="en"]

复合选择器

1.分组选择器：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择

器，还可以使用 ID 选择器、类选择器、属性选择器混合使用

p,b,i,span

2.后代选择器：选择p元素内部所有b元素。不在乎b的层次深度。当然，后代选择器也可

以混合使用 ID 选择器、类选择器、属性选择器

p b 

3.父子选择器：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一

级的元素，不可以再往下选择。

p > b

4.相邻兄弟选择器：匹配和第一个元素相邻的第二个元素。

p + b

5.普通兄弟选择器：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

p ~ b

伪元素选择器