CSS选择器详解

概述

本文主要内容来自于参考1。选择器是CSS的基本知识，本文详细归纳一下选择器的知识。

什么是选择器
- CSS选择器是用于定位文档中的元素所在以便设定相应的样式的代码
选择器的意义
- 在对文档设计样式时进行精准地定位
选择器的分类
- 选择器的类型可大致划分为：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等

选择器的类型

基础选择器

选择器	名称	作用	实例
*	通用选择器	匹配所有的元素	* { font-family: “Microsoft YaHei”; }
div	标签选择器	匹配指定名字的元素	div { margin: 0px; }
.class	类选择器	匹配指定类的元素	.class { color: grey; }
#id	ID选择器	匹配指定ID的元素	#id { font-size: 14px; }

组合选择器

选择器	名称	作用	实例
E,F	多元素选择器	同时选择多个选择器	.a .b { color: #333; }
E F	后代选择器	选择E的后代中的F	div .class { color: #333; }
E>F	子元素选择器	选择E的子元素中的F	div .class { color: #333; }
E+F	毗邻元素选择器	E之后紧跟的F	h1+p { color: #333; }

属性选择器

选择器	名称	作用	实例
E[att]	属性选择器	匹配所有含有att的E元素	p[style] { color: #333; }
E[att=val]	属性和值选择器	所有att的值为val的E元素	p[id=myid] { color: #333; }
E[att~=val]	属性和值选择器多值	所有att的值含有val（以空格分隔）的E元素	p[class=myclass] { color: #333; }
E[att\|=val]	属性和值选择器多值	所有att的值含有val（以连字符分割）的E元素	p[id\|=my] { color: #333; }

属性选择器内容并不完整，详细请阅读参考3。

伪类选择器

选择器	名称	作用	实例
E:link	link	超链接未访问时的样式	a:link { color: red; }
E:visited	visited	超链接被访问过后的样式	a:visited { color: red;}
E:hover	hover	元素被划过的时候的样式	div:hover { color: red; }
E:active	hover	元素正在被点击时的样式	div:active { color: red; }
E:first-child	first-child	父元素的第一个E类型的子元素	li:first-child { color: red; }
E:last-child	last-child	父元素的最后一个E类型的子元素	li:last-child { color: red; }
E:nth-child(n)	nth-child	父元素的第n个E类型的子元素	li:nth-child(2) { color: red; }

伪元素

选择器	名称	作用	实例
E:before	before	在元素内部前部插入内容	div:before { content: “test”; }
E:after	after	在元素内部后部插入内容	div:after { content: “test”; }

选择器的优先级

网上有很多文章称选择器的优先级可以用10进制来表示，实际上是不严谨的。

据说进位的临界值是255，也就是说255个类选择器合一起才能进位到1个ID选择器，笔者虽然没有实践过，但是即使是真的也没有任何意义，毕竟谁也不会对一个标签写255的类选择器。

实际上的优先级计算是，行内样式优先级最高，其次才按权重计算。

分3位（如果将行内样式算进来是4位，但计算行内优先级也没有意义，所以3位即可），第1位是ID选择器，第2位是类选择器，伪类选择器和伪元素，第3位是标签选择器。

比如有如下选择器。

div {}
.class2 {}
#box div {}
#box .class2 {}
.class1 .class2 {}

<div id="box" class="class1">
    <div class="class2"></div>
</div>
<!--
其优先级排序为      id     class  tag 
#box .class2      1      1      0 
#box div          1      0      1
.class1 .class2   0      2      0
.class2           0      1      0
div               0      0      1
-->

从上面可以看出，ID选择器的优先级是最高的，其次是类，最次是标签，优先级的值如果一样则按就近原则来算。注意这些选择器必须直接作用在目标标签上，否则目标标签会根据具体属性适用遗传属性的值，或者默认值。