css选择器大全
- CSS选择器
- 一 基本选择器
- 1 元素选择器
- 2 类选择器
- 3 ID选择器
- 4 属性选择器
- 5 后代选择器
- 6 子元素选择器
- 7 兄弟选择器
- 8 选择器组合
- 二 伪元素选择器
- 1 首字符伪元素选择器 ::first-letter{}
- 2 首行伪元素选择器 ::first-line
- 3 自定义内容前置伪元素选择器 ::before
- 4 自定义内容后置伪元素选择器 ::after
- 三 伪类选择器
- 1 结构性伪类选择器
- （1）:nth-child()
- （2） :nth-last-chlid()
- （3）:nth-of-type()
- （4）:nth-last-of-type()
- 2 UI状态伪类选择器
- （1）:hover
- （2）:focus
- （3） :checked
- （4） :disabled
- 3 其他伪类选择器
- 选择器优先规则
- 结语
CSS选择器
大家都知道在css中我们可以美化html元素的样式，那么我们该怎么选择要美化样式的html元素呢？这时候就要提到css选择器了，css选择器的种类很多，常用的css选择器分为三种：1、基本选择器。2、伪元素选择器。3、伪类选择器。
一 基本选择器
在CSS中，基本选择器是用于选择HTML文档中所有匹配指定条件的元素的选择器。以下是一些常见的基本选择器：
1 元素选择器
元素选择器通过元素的标签名来选择元素。例如，选择所有段落元素可以使用p选择器：
p {
/*css样式*/
}
元素选择器中的特例为 *{ } ，表示选择所有类型元素。
2 类选择器
类选择器通过元素的class属性值来选择元素。在HTML中，通过为元素添加class属性，并在CSS中使用“.”符号来表示类选择器。例如，选择class为"example"的元素：
.example {
/* CSS样式 */
}
元素选择器与class选择器结合时没有空格，元素定义时多类名用空格隔开。如下：
div .example {
/* CSS样式 */
}
.example .box{
/* CSS样式 */
}
3 ID选择器
ID选择器通过元素的id属性值来选择元素。在HTML中，通过为元素添加唯一的id属性，并在CSS中使用 # 符号来表示ID选择器。例如，选择id为"header"的元素：
#header {
/* CSS样式 */
}
4 属性选择器
通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。ID选择器可以看作属性选择器的一种。
例如选择类型为button的<input>元素：
input[type = "button"]{
/* CSS样式 */
}
其中等号“=”为严格等于，其余运算符还有：1、“^=”：表示前缀。2、“$=”：表示后缀。3、“*=”：表示包含。通过使用不同运算符可以匹配的多个属性。
5 后代选择器
后代选择器通过元素的嵌套关系来选择元素。使用空格来分隔两个元素，表示选择第一个元素内部的所有第二个元素。例如，选择所有div内部的span元素：
div span {
/* CSS样式 */
}
6 子元素选择器
子元素选择器是CSS中的一种选择器，用于选择某个元素的直接子元素。子元素选择器使用大于号（>）来表示，它只会选择作为指定元素的直接子元素的元素，而不会选择更深层次的后代元素。
如下所示：
<div class="parent">
<p>子元素1</p>
<div>
<p>子元素2</p>
</div>
</div>
.parent > p {
/* CSS样式 */
}
在上面的示例中，只有<p>子元素1</p>会被选中，而<p>子元素2</p>不会被选中，因为它是.parent元素的间接子元素而不是直接子元素。
7 兄弟选择器
兄弟选择器分为通用兄弟选择器和紧邻兄弟选择器。
通用兄弟选择器用波浪号（~）表示，用于选择指定元素后面的所有兄弟元素(具有共同父级元素)。
紧邻兄弟选择器用加号（+）表示，用于选择紧接在指定元素后面的第一个兄弟元素。
如下为html元素，
<h2>标题1</h2>
<p>段落1</p>
<h3>标题2</h3>
<p>段落2</p>
选择h2后的所有p标签：
h2 ~ p {
/*CSS样式*/
}
选择h2后的第一个p标签：
h2 + p {
/*CSS样式*/
}
注意只能向下查找兄弟，无法向上查找。
8 选择器组合
如果想让两种不同元素具有相同的样式，那么就可以使用选择器组合进行实现：h2, p {color:gray;}。效果为使h2元素和p元素中的颜色变为灰色。选择器组合通过 “,” 实现，可以将任意选择器组合到一起，没有数量限制，这样可以得到更简洁的样式表。
二 伪元素选择器
伪元素选择器（Pseudo-element Selector）是CSS中用于选择元素的特定部分或位置的选择器。伪元素选择器以双冒号（::）开头，用于向元素的特定部分添加样式，而不需要在HTML中添加额外的标记。
以下是一些常见的伪元素选择器：
1 首字符伪元素选择器 ::first-letter{}
“::first-letter”伪元素用于选择指定元素的第一个字母。例如设置段落的第一个字母为大写。
p::first-letter {
font-size: 150%;
}
2 首行伪元素选择器 ::first-line
“::first-line”伪元素用于选择指定元素的第一行文本。
例如设置段落的第一行文本为粗体
p::first-line {
font-weight: bold;
}
3 自定义内容前置伪元素选择器 ::before
“::before”伪元素用于在指定元素的内容之前插入内容。
例如在每个<p>元素前插入内容“author: ”
p::before {
content: "author: ";
}
4 自定义内容后置伪元素选择器 ::after
“::after”伪元素用于在指定元素的内容之后插入内容。
例如在每个链接后面插入箭头符号“➜”
a::after {
content: " ➜";
}
三 伪类选择器
伪类选择器（Pseudo-class Selector）是CSS中用于选择处于特定状态的元素的选择器。伪类选择器以冒号（:）开头，用于为元素在特定状态下应用样式，例如鼠标悬停、被点击、被选中等状态。
以下是一些常见的伪类选择器：
1 结构性伪类选择器
（1）:nth-child()
“:nth-child()”伪类选择器用于选择父元素的特定位置的子元素。括号内参数可以说数字、公式以及odd(奇数)、even(偶数)。
例如选择<ul>中的第一个元素<li>：
ul:nth-child(1) {
/*CSS样式*/
}
:nth-child(1)等价于:first-child 选择第一个元素。
（2） :nth-last-chlid()
与:nth-child类似，:nth-last-child()的参数也可以是数字、公式、odd、even，区别为:nth-last-child()从后向前选择。
:nth-last-child(1)等价于:last-child 选择最后一个元素。
（3）:nth-of-type()
:nth-of-type() 伪类选择器用于选择父元素下特定类型的子元素。它允许您选择同一类型的元素中的第几个元素，而不管这些元素是父元素的第几个子元素。参数同上，也可以为数字、公式、odd、even。
例如要选择 ul 元素下的第三个 li 元素，可以使用以下 CSS 代码：
li:nth-of-type(3) {
/*CSS样式*/
}
:nth-of-type(1)等价于:first-of-type选择第一个对应类型元素。
（4）:nth-last-of-type()
同理，与:nth-of-type()类似，:nth-last-of-type()的参数也可以是数字、公式、odd、even，区别为:nth-last-of-type()从后向前选择。
:nth-last-of-type等价于:last-of-type选择最后一个对应类型元素。
2 UI状态伪类选择器
（1）:hover
“:hover” 伪类选择器用于选择鼠标悬停在元素上时的状态。
示例：鼠标悬停在链接上时改变颜色：
a:hover {
color: red;
}
（2）:focus
“:focus” 伪类选择器用于选择元素获得焦点时的状态。
示例：输入框获得焦点时添加边框样式：
input:focus {
border: 1px solid blue;
}
（3） :checked
“:checked” 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
示例：为所有选中的输入元素设置宽度高度：
input:checked {
height: 50px;
width: 50px;
}
（4） :disabled
“:disabled” 选择器匹配每个禁用的的元素（主要用于表单元素）。
示例：设置所有type="text"的禁用的输入元素的背景颜色：
input[type="text"]:disabled
{
background:#dddddd;
}
3 其他伪类选择器
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
示例：为每个并非
元素的元素设置背景颜色：
:not(p)
{
background:#ff0000;
}
选择器优先规则
在CSS中，选择器的优先级决定了样式规则的应用顺序。当多个选择器同时应用于同一个元素时，CSS会根据选择器的优先级来确定应用哪个样式规则。CSS选择器的优先级从高到低依次为：
- 1!important：使用 !important 标记的样式具有最高的优先级，会覆盖其他样式规则。
- 2 内联样式：直接在 HTML 元素的 style 属性中定义的样式具有较高的优先级。
- 3 ID 选择器：通过 ID 选择器选择的元素具有较高的优先级。
- 4 类选择器、属性选择器、伪类选择器：通过类选择器、属性选择器或伪类选择器选择的元素具有一般的优先级。
- 5 元素选择器、伪元素选择器：通过元素选择器或伪元素选择器选择的元素具有较低的优先级。
- 6 通用选择器：通用选择器*{ }优先级最低。
结语
本文介绍了CSS中常用的各种选择器及其使用方法以及选择器的优先规则，如有争议，欢迎大佬们讨论。
