原创
css 选择器介绍
CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。
CSS 选择器用于选择你想要的元素的样式的模式。
下列表格中的 "CSS" 列表示在 CSS 版本的属性定义，CSS1、CSS2 和 CSS3 是层叠样式表（Cascading Style Sheets）的不同版本，每个版本引入了新的特性和功能，以改进网页样式的控制和设计。
作用：选择界面上的某一个或者某一类元素
基本选择器
1、标签 选择器
如下代码，p 选择器将选择所有 元素:
p {
color: blue;
}
2、类 选择器
通过类别名称选择具有特定类别的 HTML 元素。
类选择器以 . 开头，后面跟着类别名称。
如下代码，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。
.highlight {
background-color: yellow;
}
3、id 选择器
通过元素的唯一标识符（ID）选择 HTML 元素。
ID 选择器以 # 开头，后面跟着 ID 名称。
如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。
#runoob {
width: 200px;
}
复合选择器
1.交集选择器
语法结构：选择器1选择器2{css样式}
作用：选中页面中同时满足多个选择器的标签。
注意
- 多个选择器之间没有任何东西隔开，
紧挨着的。 - 交集选择器中如果有标签选择器，
标签选择器必须放在前面。
<style>
div.class-one {
color:red;
}
div#id-one {
color:green;
}
</style>
<body>
<div class="class-one">
111
</div>
<div id="id-one">
222
</div>
<div>
333
</div>
</body>
2.并集选择器
语法结构：选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式。
注意
- 选择器与选择器之间用
,隔开。
<style>
p, div, .class-one {
color: red;
}
</style>
<body>
<div class="class-one">
111
</div>
<div>
222
</div>
<p>
333
</p>
</body>
关系选择器
1.父亲>儿子
作用：选择某元素后面的第一代子元素。
<style>
.class-one > .class-two {
color: red;
}
</style>
<body>
<div class="class-one">
<div class="class-two">
aaa
</div>
<div>
<div class="class-two">
bbb
</div>
</div>
</div>
</body>
2.祖先 后代
作用：选择某元素后面的所有子元素。
<style>
.class-one .class-two {
color: red;
}
</style>
<body>
<div class="class-one">
<div class="class-two">
aaa
</div>
<div>
<div class="class-two">
bbb
</div>
</div>
</div>
</body>
3.兄+弟
作用：可选择紧接在另一元素后的元素，且二者有相同父元素。
<style>
.class-one+.class-two {
color: red;
}
</style>
<body>
<div class="class-one">
aaa
</div>
<div class="class-two">
bbb
</div>
</body>
4.兄~弟
作用：选取某个元素之后的所有相同元素。
注意
- 比如
.class-one ~ h2这句就是选取 .class-one后面所有的 h2。 - 这个选择器两种元素必须处于
同一个父元素内，被选取的元素不必直接紧随。
<style>
.class-one ~ .class-two {
color: red;
}
</style>
<body>
<div class="class-one">
aaa
</div>
<div>
<div class="class-two">
bbb
</div>
</div>
<div class="class-two">
ccc
</div>
</body>
结构伪类选择器
用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。
| 动态伪类 | 作用 |
|---|---|
| :link | 链接没有被访问前的样式效果 |
| :visited | 链接被访问后的样式效果 |
| :hover | 鼠标悬停在元素上面时的样式效果 |
| :active | 点击元素时的样式效果，即按下鼠标左键时发生的样式 |
| :focus | 用于元素成为焦点时的样式效果，常用与表单元素 |
| 结构伪类 | 作用 |
|---|---|
| :first-child | 选择某个元素的第一个子元素 |
| :last-child | 选择某个元素的最后一个子元素 |
| :nth-child() | 选择某个当前元素的兄弟节点下的一个或多个特定的子元素 |
| :nth-last-child() | 选择某个当前元素的兄弟节点的一个或多个特定的子元素，从后往前数 |
| :nth-of-type() | 当前元素的同类型兄弟节点的第n个当前元素 |
| :nth-last-of-type() | 当前元素的同类型兄弟节点的第n个当前元素，从后往前数 |
| :first-of-type | 选择一个父级元素下第一个同类型子元素 |
| :last-of-type | 选择一个父级元素下第一个同类型子元素，从后往前数 |
| :only-child | 选择的元素是它父元素的唯一 一个子元素 |
| :only-of-type | 选择一个元素是上级元素下唯一相同类型的子元素 |
| :empty | 选择的元素里面没有任何内容（空标签） |
| 否定伪类 | 作用 |
|---|---|
| :not() | 排查或者过滤掉特定元素 |
| 状态伪类 | 作用 |
|---|---|
| :enabled | 选择匹配指定范围内所有可用UI(用户界面)元素 |
| :disabled | 选择匹配指定范围内所有不可用UI(用户界面)元素 |
| :checked | 选择匹配指定范围内所有可选中的UI(用户界面)元素 |
| 目标伪类 | 作用 |
|---|---|
| :target | 选择匹配父元素的所有元素，且匹配元素被相关URL指向 |
属性选择器
通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。
如下代码，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 元素。
input[type="text"] {
border: 1px solid gray;
}
1.[属性]
作用：选中含有指定属性的元素
<style>
[title] {
color: red;
}
</style>
<body>
<div title="111">
111
</div>
<div>
222
</div>
</body>
2.[属性=属性值]
作用：选中含有指定属性和指定属性值的元素。
- 属性值只能由
数字，字母，下划线，中划线组成，并且不能以数字开头。
<style>
[title=aaa] {
color: red;
}
</style>
<body>
<div title="aaa">
aaa
</div>
<div title="bbb">
bbb
</div>
</body>
3.[属性^=属性值]
作用：选中含有指定属性和指定属性值开头的元素。
- 属性值只能由
数字，字母，下划线，中划线组成，并且不能以数字开头。
<style>
[title^=aaa] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="aa">
bbb
</div>
</body>
4.[属性$=属性值]
作用：选中含有指定属性和指定属性值结尾的元素。
- 属性值只能由
数字，字母，下划线，中划线组成，并且不能以数字开头。
<style>
[title$=aaa] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="bbb-aaa">
bbb
</div>
</body>
5.[属性*=属性值]
作用：选中指定属性和含有指定属性值的元素。
- 属性值只能由
数字，字母，下划线，中划线组成，并且不能以数字开头。
<style>
[title*=a] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="bbb-aaa">
bbb
</div>
</body>
更多选择器参考下列表格：
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有 元素 | 1 |
| element,element | div,p | 选择所有 元素和 元素 | 1 |
| element*.class* | p.hometown | 选择所有 class="hometown" 的 元素 | 1 |
| element element | div p | 选择 元素内的所有 元素 | 1 |
| element>element | div>p | 选择所有父级是 元素的 元素 | 2 |
| element+element | div+p | 选择所有紧跟在 元素之后的第一个 元素 | 2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个 元素的第一个字母 | 1 |
| :first-line | p:first-line | 选择每一个 元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有当 元素是其父级的第一个子级的样式。 | 2 |
| :before | p:before | 在每个 元素之前插入内容 | 2 |
| :after | p:after | 在每个 元素之后插入内容 | 2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有 元素 | 2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
批注（参考资料）：
评论
登录后才可以进行评论哦！