CSS 选择器语法举例
Jul 3, 2022
简单选择器 #
标签选择器 #
标签选择器也叫元素选择器
/*标签选择器*/
tag {background-color: gold;}
ID 选择器 #
/*ID 选择器*/
#someID {background-color: gold;}
类选择器 #
/*类选择器*/
.someClass {background-color: gold;}
组合使用 #
还有一种选择器也比较常见，形如 tag.class，但是查了一圈文档没有找到一个标准的名字，有的就归为类选择器，暂时先这么叫。它通常用来选择一个 HTML 中的带有 class='xxx' 的标签元素。
<ul class="nav">
...
</ul>
<style type="text/css">
/* 表示 class 为 nav 的 ul 元素 */
ul.nav {color: red;}
</style>
文档在 https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
类似的，CSS 中 tag#id、.class.class、#id#id 也是同样逻辑。
属性选择器 #
通过已经存在的属性名或属性值匹配元素，只有元素（标签）才能有 属性选择器。
/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;}
/* 存在 href 属性并且属性值匹配 "https://example.org" 的 <a> 元素 */
a[href="https://example.org"] {color: green;}
/* 存在 href 属性并且属性值至少包含一个 "example" 的 <a> 元素 */
a[href*="example"] {font-size: 2em;}
/* 存在 href 属性并且属性值结尾是 ".org" 的 <a> 元素 */
a[href$=".org"] {font-style: italic;}
/* 存在 class 属性并且属性值包含以空格分隔的 "logo" 的 <a>元素 */
a[class~="logo"] {padding: 2px;}
/*可以不指定元素，这将选中所有带 href 属性的 DOM 元素*/
[href] {color: red;}
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写；添加 s（或 S），可以在匹配属性值时区分大小写。
/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {color: cyan;}
/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {color: pink;}
通配选择器 #
在 CSS 中，一个星号 (*) 就是一个通配选择器。
/* 同 [lang^=en]{} */
*[lang^=en]{color:green;}
/* 同 .warning{} */
*.warning {color:red;}
/* 同 #maincontent{} */
*#maincontent {border: 1px solid blue;}
分组选择器 #
为了使样式表更简洁，可以使用逗号分隔的列表来对选择器进行分组。也常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。
/* 选择所有 <span> 和 <div> 元素 */
span, div {border: red 2px solid;}
/* 多行分组 */
#main,
.content,
article {font-size: 1.1em;}
使用选择器列表的一个缺点是，如果有一个选择器不被支持，那么整条规则都会失效。
组合器（Combinators） #
后代组合器（空格） #
选择底下所有的节点，不论层级。
<div class="box">
<p>001</p>
<div>
<p>002</p>
<p>003</p>
</div>
<p>004</p>
</div>
<style type="text/css">
/* 表示 class 为 box 的 div 下所有的 p 标签即内容为 001、002、003、004 的 p 标签 */
.box p{background-color: gold;}
</style>
直接子代组合器（大于号 > ）
#
选择底下的直接元素。
<div class="box">
<p>001</p>
<div>
<p>002</p>
<p>003</p>
</div>
<p>004</p>
</div>
<style type="text/css">
/* 表示 class 为 box 的 div 下的直接的子元素 p 即内容为 001、004 的 p 标签 */
.box > p {background-color: gold;}
</style>
一般兄弟组合器（取代符号 ~ ）
#
表示后方同层级的全部元素。
<div>
<p>001</p>
<div class="box">
<p>002</p>
</div>
<p>003</p>
<p>004</p>
</div>
<style type="text/css">
/* 表示 class 为 box 的 div 后方同层级的所有 p 元素即内容为 003、004 的 p 标签 */
.box ~ p{background-color: gold;}
</style>
紧邻兄弟组合器（加号 + ）
#
选择后方同层级的第一个元素。
<div>
<p>001</p>
<div class="box">
<p>002</p>
</div>
<p>003</p>
<p>004</p>
</div>
<style type="text/css">
/* 表示 class 为 box 的 div 后方同层级的第一个 p 元素即内容为 003 的 p 标签 */
.box + p{background-color: gold;}
</style>
伪选择器 #
伪类 #
一个冒号的 伪类 指定要选择的元素的特殊状态，可以指定多个。状态的案例非常多，随便举几个例子。
:hover
#
用于在用户将鼠标悬停在按钮上时修改成特定的样式。
/* 所有用户指针悬停的按钮 */
button:hover {color: blue;}
伪元素 #
两个冒号的 伪元素 允许对被选择元素的特定部分修改样式，一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器之后。下面举几个例子。
::first-letter
#
会选中块级元素第一行的第一个字母。
p::first-letter {font-size: 130%;}
优先级 #
当多个选择器的不同样式命中同一元素的时候，浏览器会通过优先级来判断哪些属性值最为相关，从而在该元素上应用这些属性值。上面介绍的简单选择器中，优先级是按照 标签、类、ID 选择器 递增的。而通配选择符和组合器对优先级没有影响。
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。
#myid {background-color: blue;}
.myclass {background-color: gray;}
/* 尽管 ID 选择器和类选择器具有更高的优先级，
但三个段落背景颜色都显示为红色，
因为 !important 规则会覆盖任何其他声明。 */
p {background-color: red !important;}
另外在 HTML 代码中的内联样式总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Example</title>
</head>
<body>
<div id="root" style="font-weight: bold;">
hello bold
</div>
</body>
</html>
参考 #
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors