CSS选择器汇总(w3school收集)

猫性男孩

好久不用一些东西往往就容易忘记，常用的css选择器，比如元素，后代，id，类选择，超链接的伪类等，不伦隔多久都记得，但是其他的一些，比如子元素，兄弟，伪元素等用的少，看一看就记起来了，只是每次都去w3school查，那边没有做出类似参考手册的东西，所有选择器都在不同的页面，看起来有点点不方便，还不如花点时间，把那边的内容搞过来，方便以后查看~

选择器的分类：

1. 元素选择器，使用html元素标签名，如html,body,div,p,h1

2. id选择器，使用html元素的id属性值，如某个div的id="wrapper"，选择器就是#wrapper

3. 类选择器，使用html元素的class属性值，如某个div的class="content"，选择器就是.content

4. 后代选择器，使用多个不同的选择器，中间用空格隔开，从第一个选择器开始，在满足前一个选择器的元素的后代元素中选择满足后一个选择器的元素，直到最后一个选择器，如body div p，.box div p

5. 子元素选择器，使用多个不同的选择器，中间用>号隔开，从第一个选择器开始，在满足前一个选择器的元素中选择满足后一个选择器的并且是满足前一个选择器元素的直接子元素，直到最后一个选择器，通常会应用元素选择器如h1 > strong

6. 兄弟选择器，使用多个选择器，中间用+号隔开，从第一个选择器开始，在满足前一个选择器的元素紧接的位置找满足下一个选择器的元素，并且这个元素与前一个选择器选择的元素有相同的父元素，如 div + p;

7. 属性选择器，在其他选择器的基础上，用一对[ ]包含元素的属性，用来对选择器选择的元素通过属性名及值进行过滤，如a[href^="http://www.baidu.com"]，表示选取href属性值以"http://www.baidu.com"开头的超链接元素

8. 伪类， 伪元素，内容较少，后面列出所有例子

明细规则如下：

1.元素选择器

各种标签元素：

1	html { ... }

[backcolor=rgb(248, 248, 248) !important]

2	body { ... }

3	div { ... }

2.id选择器

# + id属性值：

1	#wrapper { ... }

[backcolor=rgb(248, 248, 248) !important]

2	#header { ... }

3.类选择器

. + class属性值

1	/** 类选择器命名往往根据元素实际的语义 **/

[backcolor=rgb(248, 248, 248) !important]

2	.box { ... }

3	.line { ... }

4.后代选择器

selector1 空格 selector2 空格 selector3 ...

1	/** selector1,2,3... 可以是任何类型CSS选择器 不仅仅是元素选择器  **/

[backcolor=rgb(248, 248, 248) !important]

2	body div p { ... }

3	.content div p { ... }

[backcolor=rgb(248, 248, 248) !important]

4	#wrapper div .content { ... }

5.子元素选择器

selector1 > selector2 ...

1	h1 + strong { ... }

[backcolor=rgb(248, 248, 248) !important]

2	.content + div { ... }

3	#wrapper + p { ... }

6.兄弟选择器

selector1 + selector2

1	#wrapper + .content { ... }

[backcolor=rgb(248, 248, 248) !important]

2	.content + p {... }

赵人无名

感觉css的选择比较多，特别是有一些有点难记住