共计 8598 个字符，预计需要花费 22 分钟才能阅读完成。
这是第 97 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：深刻解析 CSS 选择器
一、前言
CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的管制，从而给指定元素增加款式。同时还要思考一个元素被赋予多个款式时如何失效的问题，这个就和选择器优先级相干了。
优先级 是基于不同品种选择器组成的匹配规定。浏览器通过 优先级 来判断哪些款式与一个元素最为相干，从而在该元素上利用这些款式。
二、CSS 选择器的分类
三、不同品种选择器的用法
接下来咱们看一看根本选择器之外的其余选择器。
属性选择器
（通过曾经存在的属性名或属性值匹配元素）
<style>
div {margin-top: 20px;}
/* 带有属性 title 的元素 */
[title]{background: #faf3e0;}
/* 带有属性 class 且值为 div1 的元素 */
[class=div1]{background: #eabf9f;}
/* 带有属性 attr 并且该属性是一个以空格作为分隔的值列表，其中至多有一个值为 attr-test2 的元素 */
[attr~=attr-test2]{background: #b68973;}
/* 带有属性 attr 且值以 te 为结尾的元素 */
[attr^=te]{background: #f39189;}
/* 带有属性 attr 且值以 Test 为结尾的元素 */
[attr$=Test]{background: #bb8082;}
/* 带有属性 attr 且值蕴含 test3 的元素 */
[attr*=test3]{background: #6e7582;}
/* 带有属性 attr 且值为 attr1 或以 attr1- 结尾 */
[attr|=attr1]{background: #046582;}
/* 属性选择器默认辨别大小写，在属性选择器的右方括号前增加一个用空格隔开的字母 i（或 I），可疏忽大小写 */
[attr*=test5 i]{background: #865858;}
</style>
<body>
<div title='helloWorld'>[title]</div>
<div class="div1">[class=div1]</div>
<div attr='attr-test1 attr-test2'>[attr~=attr-test2]</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>
伪类选择器
-
动静伪类（多用于超链接的款式）
<style> /* 未拜访的链接 */ a:link {color: #11698e;} /* 已拜访过的链接 注: 只有是以后浏览器有拜访记录的都算作已拜访的状态 */ a:visited {color: #9fb8ad;} /* 当鼠标悬浮在元素上方时 */ /* 注: 为了使点击过后的链接依然受设置的伪类款式影响，在 CSS 定义时 :hover 需设置在 :link 和 :visited 之后 */ a:hover{color: #383e56;} /* 被激活的元素 (鼠标点下且为松开时) */ /* 注: 为了使点击过后的链接依然受设置的伪类款式影响，在 CSS 定义时 :active 需设置在 :hover 之后 */ a:active{color: #fb743e;} </style> <body> <a target="_blank" href='https://juejin.cn/user/3456520257288974'> 超链接 </a> </body>
注：伪类 active 在 IOS 零碎下存在兼容问题，具体解决办法可参考 IOS 伪类 active 兼容问题
-
指标伪类、否定伪类、语言伪类
<style> html {font-size: 14px;} /* 指标伪类 :target: 代表一个惟一的页面元素(指标元素)，其 id 与以后 URL 片段匹配 */ div:target {color: #f05454;} /* 否定伪类 :not 注: 仅 Chrome、Firefox 和 Safari 高版本浏览器实用 */ p:not(#p1){color: #e27802;} /* 语言伪类 :lang */ div:lang(zh) {color: #ffc1b6;} </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> -
构造伪类
<style> /* 父元素的第一个子元素且该子元素为 p 的元素 */ p:first-child {background: #046582;} /* 父元素中第一个 span 元素 */ span:first-of-type {background: #6e7582;} /* 父元素中第 2n 个子元素且为 p 的元素 */ p:nth-child(2n) {background: #bb8082;} /* 父元素中第 2n 个 span 元素 */ span:nth-of-type(2n) {background: #f39189;} /* 父元素有且仅有一个为 i 的元素 */ i:only-child {background: #865858;} /* 父元素有且仅有一个为 i 的元素 */ strong:only-of-type {background: #8e7f7f;} /* 没有子元素的元素 */ p:empty {height: 16px; background: #bbb;} /* 根元素 HTML 中相当于 <html> */ :root {background: #e2d5d5; color: #fff;} </style> <body> <div> <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 p5"> 这是 p5</p> <strong> 这是 strong</strong> </div> </body> -
UI 元素伪类
<style> /* :enabled 可用状态 */ input[type="radio"]:enabled {box-shadow: 0 0 0 3px #7c9473;} /* :disabled 禁用状态 */ input[type="radio"]:disabled {box-shadow: 0 0 0 3px #cfdac8; cursor: not-allowed;} /* :checked radio 或 checkbox 表单被勾选状态 */ /* 留神书写程序，抉择元素雷同时 :checked 应写在 :enabled/:disabled 前面 */ input[type="radio"]:checked {box-shadow: 0 0 0 3px #c0e218 ;} /* :default 示意一组相干元素中的默认 (选中) 表单元素 此处 :default 利用于默认设置了 checked 的 radio 表单上 */ /* 该选择器能够在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上应用 */ input[type="radio"]:default {box-shadow: 0 0 0 3px #86aba1;} /* :read-only 只读状态 */ input:read-write {background: #7c9473;} /* :read-only 只读状态 */ input:read-only {background: #cfdac8;} </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>
div {margin-left: 50px;}
/* ::after 在选中元素的最初增加一个子元素，默认为行内元素 (替换元素上不失效) */
.div1::after {content: 'div1 的 after'; margin-left: 10px; color: #ef4f4f}
/* ::before 在选中元素的第一个地位增加一个子元素 (其余用法同 ::after) */
.div2::before {content: 'div2 的 before'; margin-right: 10px; color: #ee9595}
/* ::first-letter 匹配选中块级元素的第一行的第一个字符 */
.div3::first-letter {color: #ff4646}
/* ::first-line 匹配选中块级元素的第一行 */
.div4::first-line {color: #9dab86}
/* ::marker 匹配选中有序或无序列表的序号或符号 */
.div5 ul li::marker {color: #fdb827}
/* ::selection 匹配元素中被选中高亮的局部 */
.div6::selection {background: #9dab86; 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>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="div6">div6</div>
</body>
- 一个选择器中只能应用一个伪元素
-
CSS3 中伪元素应该用双冒号，以便辨别伪元素和伪类。然而旧版的标准未做明确辨别，所以大多数浏览器中反对局部伪元素应用单双冒号两种写法
组合选择器
<style>
/* 后辈选择器 空格隔开 匹配所有合乎的后辈元素 */
div span {margin-left: 10px; background: #ff8585}
/* 间接子后辈选择器 > 连贯; 匹配合乎的间接子元素; 不包含子元素的子元素 */
.div1>span {color: #6155a6}
/* 群组选择器 逗号隔开 */
.div1, .div2 {color: #a7c5eb}
/* 相邻兄弟元素选择器 + 连贯; 匹配某元素后紧邻的兄弟元素 */
.div3 + div {color: #fd3a69}
/* 兄弟选择器 ~ 连贯; 匹配某元素后所有同级的指定元素，强调的是所有的 */
.div5 ~ div {color: #008891 ;}
</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>
四、CSS 选择器优先级
根本选择器的优先级是：!important > 内联 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器。那么它如何计算的呢？有这样一个计算表格
| 选择器 | 示例 | 权重值 |
|---|---|---|
| !impotant | color: #fff !important; | 正无穷 |
| 内联选择器 | <div style=’color: #fff’> 款式作用元素 </div> | 1 0 0 0 |
| ID 选择器 | #id | 1 0 0 |
| 类选择器、属性选择器、伪类选择器 | .class | 1 0 |
| 标签选择器、伪元素选择器 | div | 1 |
| 通用选择器 | * | 0 |
| 继承属性 | <div style=’color: #fff’><span> 款式作用元素 </span></div> | -1 |
假如在一个拍卖会上，有以下几种筹码：
* 一个 ` 内联款式 ` 相当于一千元
* 一个 `ID 选择器 ` 相当于一百元
* 一个 ` 类选择器 ` 相当于十元;
* 一个 ` 标签选择器 ` 相当于一元
* 通用选择器为零元
每呈现一个上述选择器，就减少对应筹码的钱数，最终采纳出钱最多的款式。然而，这里的钱数计算方法和生存中的计算方法不一样，这里的 ” 单位 ” 不会因为值的累加而进行换算。例如十个一百只能是‘十百’，依然小于一千。
根本选择器
<style>
* {color: #31326f} /* 通用 */
div {background: #9ddfd3} /* 标签 */
.div-class {background: #dbf6e9} /* 类 */
.p1, .p2, .p3 {background: #ffdada; color: #060930} /* 类 */
#p1-1 {background: #595b83} /* id */
.p3 {color: #595b83 !important} /* !important */
</style>
<body>
<div class="div-class">
<h1>Hello word!</h1>
<p class="p1" id="p1-1">Hello word!</p>
<p class="p2" style="color: white">Hello word!</p> <!-- 内联款式 -->
<p class="p3" style="color: white">Hello word!</p> <!-- 内联款式 -->
</div>
</body>
其余选择器
<style>
div {color: #a20a0a}
div .p1 ~ p {background: #fceef5; color: #ffa36c} /* 总权重值: 12 */
div p ~ p {background: pink;} /* 总权重值: 3 */
.div-class .p1 ~ p {color: #799351} /* 总权重值: 21 */
/* 以下两行款式若调换地位，则 .p1 的 ::after 文本色彩为 #333456 */
.div-class p::after {content:'p-after'; margin-left: 10px; color: #333456} /* 总权重值: 0 0 1 2 */
div .p1::after {color: #42bfd8} /* 总权重值: 12 */
/* 以下两行款式若调换地位，则 .p1 的文本色彩为 #92817a */
.p1 {color: #92817a}
[name="p1"] {color: #bedbbb}
/* 同一元素款式存在抵触且同时存在 !important */
div .span1 {color: #0e918c !important;}
.span1 {color: #6a097d !important;}
</style>
<body>
<div class="div-class">
<h1>Hello word!</h1>
<p class="p1" name="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<span class="span1">span1</span>
</div>
</body>
注：
- 权重值雷同时，写在前面的款式失效
- !important 是 CSS 选择器中的一个 ” 流氓 ” 属性，不管选择器的权重或者优先级的高下，只有加上 !important，那么这个款式的优先级就是最高的
- 如果针对同一元素款式存在抵触且同时存在 !important，那么选择器总权重值高者失效
选择器的权重值最高就肯定会失效吗？不肯定哦~
<style>
div {max-width: 100px;}
div, p {background: #bedbbb}
.div1 {width: 200px !important;}
.p1 {width: 200px;}
</style>
<body>
<div class="div1"> 这是 div1</div>
<p class="p1"> 这是 p1</p>
</body>
注：对于一些互斥的款式，例如 max-width 与 width，选择器的权重值再高也是无能为力的。
五、总结
如你所见，CSS 选择器也是暗藏玄机的哦。不过到目前为止，临时没有可能通过元素抉择其父元素或其父元素相干元素的选择器，这就让人很是头疼。
如有问题，欢送沟通与斧正~
参考文章
- IOS 伪类 active 兼容问题
- MDN CSS 选择器
- CSS 伪类选择器有几种？
- 优先级是如何计算的？
举荐浏览
通过自定义 Vue 指令实现前端曝光埋点
H5 页面列表缓存计划
招贤纳士
政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。
如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com
正文完