选择器（ selector ）是 CSS 中很重要的概念，所有 HTML 语言中的标记样式都是通过不同的 CSS 选择器来控制的。用户只需要通过选择对不同的 HTML 标签进行选择，并赋予各种样式声明，即可实现各种效果。
1、什么是 CSS 选择器
对于 CSS 选择器，百度百科词条是这么介绍的： 要使用 CSS 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML 页面中的元素就是通过 CSS 选择器进行控制的。 每一条 CSS 样式定义由两部分组成，形式如下： [ code ] 选择器{样式} [ /code ] 在{}之前的部分就是“选择器”。 “选择器”指明了{ }中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
2、CSS 选择器的分类
3、不同种类选择器的用法
3.1、基本选择器
<style type="text/css">
div { text-align: center; }
* { color: red; } /* 通用选择器 */
#div { color: yellow; } /* id选择器 */
.div { color: blue; } /* class类选择器 */
p { color: green; } /* 标签名选择器 */
</style>
<body>
<div>通用选择器</div>
<div id="div">ID选择器</div>
<div class="div">class选择器</div>
<p>标签名选择器</p>
</body>
3.2、属性选择器
通过已经存在的属性名或属性值匹配元素
<style>
div { text-align: center; }
/* 带有属性 title 的元素 */
[title] { color: red; }
/* 带有属性 class 且值为 div1 的元素 */
[class=div] { color: orange; }
/* 带有属性 attr 并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 attr-test1 的元素 */
[attr~=attr-test1] { color: yellow; }
/* 带有属性 attr 且值以 te 为开头的元素 */
[attr^=te] { color: green; }
/* 带有属性 attr 且值以 Test 为结尾的元素 */
[attr$=Test] { color: lightseagreen; }
/* 带有属性 attr 且值包含 test3 的元素 */
[attr*=test3] { color: blue; }
/* 带有属性 attr 且值为 attr1 或以 attr1- 开头 */
[attr|=attr1] { color: purple; }
/* 属性选择器默认区分大小写，在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可忽略大小写 */
[attr*=test5 i] { color: hotpink; }
</style>
<body>
<div title='title'>[title]</div>
<div class="div">[class=div]</div>
<div attr='attr-test1 attr-test2'>[attr~=attr-test1]</div>
<div attr='test'>[attr^=te]</div>
<div attr='attrTest'>[attr$=Test]</div>
<div attr='attr-test3'>[attr*=test3]</div>
<div attr='attr1-test4'>[attr|=attr1]</div>
<div attr='attr-Test5'>attr*=test5 i</div>
</body>
3.3、组合选择器
<style>
/* 后代选择器 空格隔开 匹配所有符合的后代元素*/
div span { margin-left: 10px; background: pink; }
/* 直接子后代选择器 > 连接; 匹配符合的直接子元素,不包括子元素的子元素 */
.div1 > span { color: red; }
/* 群组选择器 逗号隔开 */
.div1, .div2 { color: yellow; }
/* 相邻兄弟元素选择器 + 连接; 匹配某元素后紧邻的兄弟元素 */
.div3 + div { color: blue; }
/* 兄弟选择器 ~ 连接; 匹配某元素后所有同级的指定元素，强调的是所有的 */
.div5 ~ div { color: green; }
</style>
<body>
<div class="div1">
div1
<span class="span1">span1<span class="span1-1">span1-1</span></span>
</div>
<div class="div2">div2<span class="span2">span2</span></div>
<div class="div3">div3<span class="span3">span3</span></div>
<div class="div4">div4<span class="span4">span4</span></div>
<div class="div5">div5<span class="span5">span5</span></div>
<div class="div6">div6<span class="span6">span6</span></div>
<div class="div7">div7<span class="span7">span7</span></div>
<div class="div8">div8<span class="span8">span8</span></div>
</body>
3.4、伪类选择器
- 目标伪类、否定伪类、语言伪类选择器
<style>
/* 目标伪类 :target: 代表一个唯一的页面元素(目标元素)，其 id 与当前URL片段匹配 */
div:target { color: red; }
/* 否定伪类 :not 仅 Chrome、Firefox 和 Safari 高版本浏览器适用*/
p:not(#p1) { color: yellow; }
/* 语言伪类 :lang */
div:lang(zh) { color: blue; }
</style>
<body>
<h3>目标伪类 :target</h3>
<div id="div1">目标伪类: 这是 div1</div>
<div id="div2">目标伪类: 这是 div2</div>
<h3>否定伪类 :not</h3>
<p id="p1">否定伪类: 这是 p1</p>
<p id="p2">否定伪类: 这是 p2</p>
<h3>语言伪类 :lang</h3>
<div lang="en">语言伪类: 这是 en</div>
<div lang="zh">语言伪类: 这是 zh</div>
</body>
- UI元素伪类
<style>
/* :enabled 可用状态 */
input[type="radio"]:enabled { box-shadow: 0 0 0 3px red; }
/* :disabled 禁用状态 */
input[type="radio"]:disabled { box-shadow: 0 0 0 3px orange; cursor: not-allowed; }
/* :checked radio 或 checkbox 表单被勾选状态 */
/* 注意书写顺序，选择元素相同时 :checked 应写在 :enabled/:disabled 后面 */
input[type="radio"]:checked { box-shadow: 0 0 0 3px yellow; }
/* :default 表示一组相关元素中的默认(选中)表单元素 此处 :default 应用于默认设置了 checked 的 radio 表单上 */
/* 该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用 */
input[type="radio"]:default { box-shadow: 0 0 0 3px blue;}
/* :read-write 读写状态 */
input:read-write { background: green; }
/* :read-only 只读状态 */
input:read-only { background: hotpink; }
</style>
<body>
<div>
<input type="radio" name="my-radio" id="radio1" checked>
<label for="radio1">默认选中</label>
<input type="radio" name="my-radio" id="radio2">
<label for="radio2">未选中-可用</label>
<input type="radio" name="my-radio" id="radio1" disabled>
<label for="radio1">未选中-禁用</label>
</div>
<div>
<input type="input" name="my-input" id="input1" value="input1">
<input type="input" name="my-input" id="input2" value="input2" readonly>
</div>
</body>
- 动态伪类
<style>
/* 未访问的链接 */
a:link { color: red; }
/* 已访问过的链接 */
a:visited {color: yellow; }
/* 当鼠标悬浮在元素上方时 */
/* 为了使点击过后的链接仍然受设置的伪类样式影响，在CSS 定义时 :hover 需设置在 :link 和 :visited 之后 */
a:hover{ color: blue; }
/* 被激活的元素 (鼠标点下且为松开时) */
/* 为了使点击过后的链接仍然受设置的伪类样式影响，在CSS 定义时 :active 需设置在 :hover 之后 */
a:active{ color: green; }
</style>
<body>
<a href='https://www.baidu.com'>百度一下你就知道</a>
</body>
- 结构伪类
<style>
/* 父元素的第一个子元素且该子元素为 p 的元素 */
p:first-child { background: red; }
/* 父元素中第一个 span 元素 */
span:first-of-type { background: orange; }
/* 父元素中第 2n 个子元素且为 p 的元素 */
p:nth-child(2n) { background: yellow; }
/* 父元素中第 2n 个 span 元素 */
span:nth-of-type(2n) { background: green; }
/* 父元素有且仅有一个为 i 的元素 */
i:only-child { background: blue; }
/* 父元素有且仅有一个为 strong 的元素 */
strong:only-of-type { background: lightgreen; }
/* 没有填空的元素 */
p:empty { height: 20px; background: hotpink; }
/* 根元素 HTML 中相当于 <html> */
:root { color: white; background: lightseagreen; }
</style>
<body>
<p class="p1">这是 p1</p>
<p class="p2">这是 p2</p>
<p class="p3"><i>这是 p3</i></p>
<p class="p4">这是 p4</p>
<span class="span1">这是 span1</span>
<span class="span2">这是 span2</span>
<p class="empty"></p>
<strong>这是 strong</strong>
</body>
3.5、伪元素选择器
<style>
/* ::after 在选中元素的最后添加一个子元素，默认为行内元素 (替换元素上不生效) */
.div1::after { content: 'div1 的 after'; margin-left: 10px; color: red }
/* ::before 在选中元素的第一个位置添加一个子元素 (其他用法同 ::after) */
.div2::before { content: 'div2 的 before'; margin-right: 10px; color: orange }
/* ::first-letter 匹配选中块级元素的第一行的第一个字符 */
.div3::first-letter { color: yellow }
/* ::first-line 匹配选中块级元素的第一行 */
.div4::first-line { color: blue }
/* ::marker 匹配选中有序或无序列表的序号或符号 */
.div5 ul li::marker { color: green }
/* ::selection 匹配元素中被选中高亮的部分 */
.div6::selection { background: purple; color: white }
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4第一行<br>div4第二行</div>
<div class="div5">div5
<ul>
<li>li1</li>
<li>li2</li>
</ul>
</div>
<div class="div6">div6</div>
</body>
4、CSS 选择器优先级
基本选择器的优先级是：!important > 内联 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器。
4.1、权重计算规则
- 内联样式，如：style="..."，权重值为1000。
- ID选择器，如：#test，权重值为0100。
- 类，伪类、属性选择器，如：.test，权重值为0010。
- 类型选择器、伪元素选择器，如：div、p，权重值为0001。
- 通配符、子选择器、相邻选择器等。如：* 、> 、+，权重值为0000。
- 继承的样式没有权重值。
- !impotant 。权重值无限大。
4.2、比较规则
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
- 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样；ID > class >元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
- 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0 权值比无权值优先。
- !important 是 CSS 选择器中的一个流氓属性，不论选择器的权重或者优先级的高低，只要加上!important，那么这个样式的优先级就是最高的。
- 如果针对同一元素样式存在冲突且同时存在 !important，那么选择器总权重值高者生效。
但是，选择器权重高就一定会生效么？
<style type="text/css">
div{
max-width: 100px;
background-color: red;
}
#div1{
width: 200px!important;
background-color: red;
}
p{
width: 200px;
background-color: red;
}
</style>
<body>
<div id="div1">div1</div>
<div style="width: 200px;">div2</div>
<p>p</p>
</body>
所以，对于一些互斥的样式，例如 max-width 与 width，选择器的权重值再高也是无能为力的。
5、参考文档
- www.w3school.com.cn/cssref/css_… W3school官网
- www.runoob.com/cssref/css-… 菜鸟教程
- www.ruanyifeng.com/blog/2009/0… 阮一峰的网络日志
