原文网址：CSS--选择器--使用/教程_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。
官网
CSS 选择器 - CSS（层叠样式表） | MDN
CSS 参考 - CSS（层叠样式表） | MDN
分类
CSS3选择器分类如下图所示：
选择器优先级
简介
说明
CSS选择器的优先级关系是：内联 > ID选择器 > 类/属性/伪类 选择器 > 标签/伪元素 选择器。
详解
CSS优先级由0, 0, 0, 0这样的特殊值来表示，计算规则是左大右小。举个例子：1, 0, 0, 0 > 0, 99, 99, 99。特殊值越大，优先级越高。
| 样式类别 | 值 |
| 内联样式 | 1, 0, 0, 0 |
| ID选择器 | 0, 1, 0, 0 |
| 类/属性/伪类 选择器 | 0, 0, 1, 0 |
| 标签/伪元素 选择器 | 0, 0, 0, 1 |
| 通配选择器（*） | 0, 0, 0, 0 |
注意：属性后带 !important 的属性拥有最高优先级。若多个属性同时插有 !important，就利用上边的规则判断优先级。
来源：《CSS REFACTORING》 ：
A specificity is determined by plugging numbers into (a, b, c, d):
- If the styles are applied via the style attribute, a=1; otherwise, a=0.
- b is equal to the number of ID selectors present.
- c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
- d is equal to the number of type selectors and pseudoelements present.
其他计算优先级的方法（不推荐这种方法）
另外一种方法是：权重用数字来计算，选择器的权重计算是将构成的选择器的权重值相加。
| 选择器名称 | 权重数值 |
| ! important | 正无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class / 属性 / 伪类 | 10 |
| 标签 / 伪元素 | 1 |
| 通配符 | 0 |
CSS中的权重是256进制的，这就意味着1和0之间相差的并非1，而是256。
#id-div p{
background-color: red;
}
上面这行代码，存在id选择器与标签选择器，他们构成了并列选择器，这个选择器的权重计算是将构成的选择器的权重值相加：id选择器的数值为100，标签选择器的数 值为1，这个并列选择器的权重值就为：100+1，也就是101。
CSS里的! important是正无穷，在数学中，正无穷+1 = 正无穷，但在编程语言中，正无穷+1就是比正无穷大。
示例
<html>
<head>
<meta charset="UTF-8">
<title>
CSS优先级计算规则
</title>
<style>
p {color: red;} /* 样式1：元素选择器，特殊值：0,0,0,1 */
div P {color: orange;} /* 样式2：元素选择器+元素选择器，特殊值：0,0,0,2 */
.yellow-p {color: pink;} /* 样式3：类选择器，特殊值：0,0,1,0 */
div .yellow-p {color: green;} /* 样式4：元素选择器+类选择器，特殊值：0,0,1,1 */
.purple {color: purple;} /* 样式5：类选择器，特殊值：0,0,1,0 */
#blue1, #blue2, #blue3 {color: blue;} /* 样式6：ID选择器，特殊值：0,1,0,0 */
.red {color: red !important;} /* 样式7：!important优先级最高 */
</style>
</head>
<body>
<p>这条应该是红色。（对应“样式1”）</p>
<div>
<p>这条应该是橙色。（对应“样式2”）</p>
</div>
<p class="yellow-p">这条应该是粉红色（对应“样式3”）</p>
<div>
<p class="yellow-p">这条应该是绿色（对应“样式4”）</p>
<p class="yellow-p" id="blue1">这条应该是蓝色（对应“样式6”）</p>
<p class="yellow-p" id="blue2" style="color:purple">行间样式，这条应该是紫色</p>
</div>
<p class="yellow-p purple">这条应该是紫色，特殊值一样，后来居上（对应“样式5”）</p>
<p id="blue3" class="red" style="color:purple">这条应该是红色。!important优先级最高（对应“样式6”）</p>
</body>
</html>结果
基本选择器
大全
| 选择器 | 类型 | 功能描述 | 示例 |
| * | 通配选择器 | 匹配文档中所有HTML元素（标签）。 一般会省略：*.class与.class是一样的。 | * { margin:0; padding:0; } |
| E | 元素选择器 | 匹配指定类型的HTML元素（标签）。 | p { font-size:2em; } //p标签 |
| #idName | ID选择器 | 匹配ID属性值为“idName”的元素 | #info { background:#ff0; } //id为'info'的元素 p#info { background:#ff0; } //p标签，且id为'info'的元素 |
| .className | 类选择器 | 匹配class属性值为“className”的元素 | .info { background:#ff0; } //class有'info'的元素 p.info { background:#ff0; } //p标签，且class有'info'的元素 .info.error { color:#900;} //class有'info'和'error'的元素。例：class = "info warning error" |
| 见下方 | 属性选择器 | 将每一个选择器匹配的元素集合并 | [title] { color:#f00; } p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } |
属性选择器
| 选择器 | 功能描述 |
| [attribute] | 匹配带有指定属性的元素。 |
| [attribute=value] | 匹配带有指定属性和值的元素。 |
| [attribute~=value] | 匹配属性值中包含指定词汇的元素。 |
| [attribute|=value] | 匹配属性值以指定值开头的每个元素。该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
示例
/* 存在 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;
}注意
需要value的选择器，value必须是全名称才会匹配
例如：
<p lang="english">This is english</p>p[lang |= en]不匹配。p[lang |= english]匹配
value外边加不加引号都可以
例如：
<p lang="english">This is english</p>p[lang |= "english"]和p[lang |= english]都匹配
分组选择器
,（逗号）：选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
示例：div, span //匹配 <span> 元素或 <div> 元素。
层次选择器
| 选择器 | 类型 | 功能描述 | 示例 |
| 空格 | 后代选择器 （包含选择器） | 选择前一选择器的子代为后一选择器的节点。 （可选择子选择器的子选择器） | div span 匹配 <div> 元素内的所有 <span> 元素。 #idA span 匹配 id为"idA" 元素内的所有 <span> 元素。 |
| > | 直接子代选择器 | 选择前一元素的直接子代为后一选择器的节点。 （不可选择子选择器的子选择器） | div > h2 匹配 <div> 元素内的所有 <h2> 直接子元素 |
| + | 相邻兄弟选择器 | 后一选择器紧跟在前一选择器之后，且共享同一个父节点 | h2 + p 匹配所有紧邻在 <h2> 元素后的 <p> 元素 |
| ~ | 通用选择器 | 后一个选择器在前一个选择器后面的任意位置，并且共享同一个父选择器。 | p ~ span 匹配<p> 元素后的所有 <span> 元素（p和span在同一父元素下）。 |
| || | 列组合选择器 | 选择属于某个表格行的节点。 | col || td 匹配所有 <col> 作用域内的 <td> 元素 |
联合使用示例
- div > span + a
- 选择直接在div下，而且前一个元素是span的a元素
- .profile p,.nickname
- 选择class包含profile的元素里边的p元素和class包含nickname的元素。
伪类选择器
简介
伪类是选择器的一种，它用于选择处于特定状态的元素，比如：当该元素是这一类型的第一个元素时；当鼠标指针悬浮在该元素上面时。
它们表现得像是向你的文档的某个部分应用了一个类一样，帮你在标记文本中减少多余的类，让代码更灵活、更易于维护。
下边所有的选择器前边都可以加一个元素名，例如：p:focus //表示获得焦点的p元素。
动态
| 选择器 | 功能描述 |
| :link | 匹配被定义了超链接并未被访问过的元素。常用于链接锚点上 |
| :visited | 匹配被定义了超链接并已被访问过的元素。常用于链接锚点上 |
| :active | 匹配被激活的元素。常用于链接锚点和按钮上 |
| :hover | 匹配用户鼠标停留的元素。IE6及以下浏览器仅支持a:hover |
| :focus | 匹配素获取焦点的元素 |
| :focus-within | 表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内） |
目标
| 选择器 | 功能描述 |
| :target | 匹配被相关URL指向指向的元素。 |
UI元素状态
| 选择器 | 功能描述 |
| :checked | 匹配选中的复选按钮或者单选按钮表单元素 |
| :enabled | 匹配所有启用的表单元素 |
| :disabled | 匹配所有禁用的表单元素 |
| :default | 表示一组相关元素中的默认表单元素。 |
| :invalid | |
| :required | 表示任意设置了required属性的<input>，<select>, 或 <textarea>元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。 |
| :optional | 表示任意没有required属性的 <input>，<select> 或 <textarea> 元素。 |
| :indeterminate | 表示状态不确定的表单元素 |
结构
| 选择器 | 功能描述 |
| :first-child | 表示在一组兄弟元素中的第一个元素。与E:nth-child(1)等同 |
| :last-child | 代表父元素的最后一个子元素。与E:nth-last-child(1)等同 |
| :root | 匹配文档树的根元素。 对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。 |
| :nth-child(an+b) | 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。 例如： span:nth-child(3) 子元素中第3个且为 span 的元素 |
| :nth-last-child(an+b) | 从兄弟节点中从后往前匹配处于某些位置的元素。和 :nth-child 基本一致, 但它从结尾计数. |
| :nth-of-type(an+b) | 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 |
| :nth-last-of-type(an+b) | 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数 |
| :first-of-type | 表示一组兄弟元素中其类型的第一个元素。与E:nth-of-type(1)等同 |
| :last-of-type | 表示在（它父元素的）子元素列表中，最后一个给定类型的元素。与E:nth-last-of-type(1)等同 |
| :only-child | 匹配没有任何兄弟元素的元素。 等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1)。当然,前者的权重会低一点 |
| :only-of-type | 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
| :empty | 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。 |
注意
- 元素的第一个子元素的下标为 1
- “ul>li:nth-child(3)”并不是一定选择列表ul元素中的第3个子元素li。仅当列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。
- nth-child(2n+1) 中参数只能是n，不可以用其他字母代替。
- nth-child(odd) 选择的是奇数项，:nth-last-child(odd) 选择的是偶数项
否定
MDN网站
| 选择器 | 功能描述 |
| :not(selector) | 匹配选择器selector之外的的元素。 selector可以是一个或多个以逗号分隔的选择器列。 |
示例
<html xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
p:not(.irrelevant) {
font-weight: bold;
}
p > strong,
p > b.important {
color: green;
}
p > :not(strong, b.important) {
color: red;
}
</style>
<title></title>
</head>
<body>
<p><b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost the same as an Earth day,
only <strong>37 minutes</strong> longer.
</p>
<p class="irrelevant">
<b class="important">NASA</b>'s Jet
Propulsion Laboratory is designing mission concepts to survive the <b>Venus</b> extreme temperatures and atmospheric
pressure.
</p>
</body>
</html>结果
详解
- 可以同时否定多个选择器。例如：:not(.foo, .bar) 等同于 :not(.foo):not(.bar)。
- 可以否定动态元素，例如：表示a元素的非悬浮样式：a:not(:hover) { color: blue}
- :not(.foo) 将匹配任何非 .foo 的元素，包括 <html> 和 <body>。
- 可以使用此伪类编写无用的选择器。例如，:not(*) 匹配任何不是元素的元素，这显然是荒谬的，所以这个附加的规则将永远不被应用。
- 可以利用这个伪类提高规则的优先级。例如，#foo:not(#bar) 和 #foo 都将匹配相同的元素，但是具有两个 id 的选择器具有更高的优先级。
- :not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；提供与 :not(:is(argument)) 相同的优先级。
- 这个选择器将匹配任意“不是一个 X”的元素。当与后代选择器一起使用，这可能令人惊讶，因为有多种路径可以选择一个目标元素。例如，body :not(table) a 仍将应用 <table> 中的链接，因为 <tr>、<tbody>、<th>、<td>、<caption> 等都可以匹配选择器 :not(table) 部分。
- 如果传递给 :not() 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用：:is 伪类，它接受一个可容错选择器列表。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效，但是 :not(:is(.foo, :invalid-pseudo-class)) 将匹配任何（包括 <html> 和 <body>）不是 .foo 的元素。
其他
| 选择器 | 功能描述 |
| :defined | 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 |
| :host | 表示包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素。 |
| :in-range | |
| :out-of-range | |
| :lang(xx) | 基于元素语言来匹配页面元素。 |
| :left | |
| :right | |
| :read-only | 表示元素不可被用户编辑的状态（如锁定的文本输入框）。 |
| :read-write | 代表一个元素（例如可输入文本的 input元素）可以被用户编辑。 |
| :scope | 表示作为选择器要匹配的参考点的元素。 |
伪元素选择器
其他网址
简介
伪元素和伪类类似，不过看起来像往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
伪元素选择器用于表示无法用 HTML 语义表达的实体。也可以用于表示属性键为psudo的值，例如：<input type="range">，其会生成shadow DOM：
此时，这个CSS可以将滑块轨道变红：
input::-webkit-slider-runnable-track {
background: red;
}语法：两个冒号::。双冒号这个语法从CSS3引入，为了区分伪类与伪元素，CSS2及之前都是单冒号。CSS3的伪元素基本都可以使用单冒号替代双冒号来使用CSS2语法。
属性
| 属性 | 描述 | 示例 |
| 在元素之后添加内容。 常通过 content 属性为一个元素添加修饰性内容。默认为行内元素。 | /* Add an arrow after links */ | |
| 在元素之前添加内容。 常通过 content 属性为一个元素添加修饰性内容。默认为行内元素。 | /* Add a heart before links */ | |
| 匹配所选元素中的WebVTT提示。 可用于在VTT轨道的媒体中使用字幕和其他线索。 | ||
| 匹配块级元素的第一行。 | p::first-line { text-transform: uppercase; } | |
| 匹配块级元素的第一行第1个字母。 | p::first-letter { text-transform: uppercase; } | |
| 匹配被用户高亮的部分（比如使用鼠标选中的部分） | ::selection { background-color: cyan; } | |
| 匹配那些被放在 槽(slot) 中的元素 | ::slotted([name="title"]) { font-weight: bold; } |
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
