CSS--选择器--使用/教程
原文网址：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就是比正无穷大。
示例
CSS优先级计算规则
这条应该是红色。（对应“样式1”）
这条应该是橙色。（对应“样式2”）
这条应该是粉红色（对应“样式3”）
这条应该是绿色（对应“样式4”）
这条应该是蓝色（对应“样式6”）
行间样式，这条应该是紫色
这条应该是紫色，特殊值一样，后来居上（对应“样式5”）
这条应该是红色。!important优先级最高（对应“样式6”）
结果
基本选择器
大全
| 选择器 | 类型 | 功能描述 | 示例 |
| * | 通配选择器 | 匹配文档中所有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[title] {color: purple;
}/* 存在 href 属性并且属性值匹配"https://example.org"的 元素 */
a[href="https://example.org"] {color: green;
}/* 存在 href 属性并且属性值包含"example"的 元素 */
a[href*="example"] {font-size: 2em;
}/* 存在 href 属性并且属性值结尾是".org"的 元素 */
a[href$=".org"] {font-style: italic;
}/* 存在 class 属性并且属性值包含单词"logo"的元素 */
a[class~="logo"] {padding: 2px;
}注意
需要value的选择器，value必须是全名称才会匹配
例如：
This is english
p[lang |= en]不匹配。p[lang |= english]匹配
value外边加不加引号都可以
例如：
This is english
p[lang |= "english"]和p[lang |= english]都匹配
分组选择器
,（逗号）：选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
示例：div, span //匹配 元素或 元素。
层次选择器
| 选择器 | 类型 | 功能描述 | 示例 | |
| 空格 | 后代选择器 （包含选择器） | 选择前一选择器的子代为后一选择器的节点。 （可选择子选择器的子选择器） | div span 匹配 元素内的所有 元素。 #idA span 匹配 id为"idA" 元素内的所有 元素。 | |
| > | 直接子代选择器 | 选择前一元素的直接子代为后一选择器的节点。 （不可选择子选择器的子选择器） | div > h2 匹配 元素内的所有 直接子元素 | |
| + | 相邻兄弟选择器 | 后一选择器紧跟在前一选择器之后，且共享同一个父节点 | h2 + p 匹配所有紧邻在 元素后的元素 | |
| ~ | 通用选择器 | 后一个选择器在前一个选择器后面的任意位置，并且共享同一个父选择器。 | p ~ span 匹配 元素后的所有 元素（p和span在同一父元素下）。 | |
| || | 列组合选择器 | 选择属于某个表格行的节点。 | 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属性的， |