这是我参与更文挑战的第 2 天，活动详情查看： 更文挑战
CSS 选择器是 CSS 的核心，CSS 通过各种选择器来获得 HTML 中的任意元素并给它们设置样式，CSS 选择器相当于设置样式的入口。如下：
1 CSS 基本选择器
| 关系选择器名称 | 选择器格式 | 描述 | 实例 |
|---|---|---|---|
| 通配符选择器 | * | 匹配 HTML 中所有的元素 | * {color: green;} |
| 标签选择器 | 标签名 | 为指定标签设置样式 | p {color: green;} |
| 类选择器 | .类名 | 可以为标有 class="" 属性的 HTML 元素设置样式 | .box1 {color: green;} |
| id选择器 | #id名 | 可以为标有 id="" 属性的 HTML 元素设置样式 | #box2 {color: green;} |
| 并列选择器 | div,.box1,#dog1 | 选择所有 div 标签和所有 class="box1" 的标签和 id="dog1" 的标签 | div,.box1,#dog1 {color: red;} |
2 属性选择器
属性选择器可以根据元素的属性及其属性值来选择元素。
属性选择器常见格式：
| 属性选择器 | 描述 | 实例 |
|---|---|---|
div[class] | 选择具有 class 属性的 div 元素 | div[class] {color: red;} |
input[type="text"] | 选择具有 type 属性且 type 属性值等于 text 的 input 元素 | input[type="text"] {color: red;} |
span[class~="cat"] | 选择具有 class 属性且 class 属性值包含 cat 的 span 元素 | span[class~="cat"] {color: red;} |
span[class^="d"] | 选择具有 class 属性且 class 属性值以 d 开头的 span 元素 | span[class^="d"] {color: red;} |
span[class$="t"] | 选择具有 class 属性且 class 属性值以 t 结尾的 span 元素 | span[class$="t"] {color: red;} |
3 关系选择器
关系选择器可以根据元素与元素之间所处的关系来选择元素。
常见的关系选择器有：
| 关系选择器名称 | 各选择器格式 | 描述 | 实例 |
|---|---|---|---|
| 后代选择器 | div span | 选择 div 元素下的所有后代 span 元素 | div span {color: red;} |
| 子元素选择器 | div>span | 只选择 div 元素下的子（第一代） span 元素 | div>span {color: red;} |
| 相邻兄弟选择器 | a+p | 选择紧接在 a 元素后面的同级所有 p 元素，a 和 p 有相同的父元素 | a+p {color: red;} |
4 伪类选择器
专门用来表示元素的一种特殊状态。伪类选择器以 : 定义。
常见伪类选择器：
| 伪类选择器 | 描述 | 实例 |
|---|---|---|
a:link | 超链接未访问的状态，默认状态 | a:link { color: blue;} |
a:hover | 鼠标移入超链接的状态 | a:hover { color: red;} |
a:active | 鼠标点下超链接且未松开鼠标的状态 | a:active { color: green;} |
a:visited | 已经访问过的超链接的状态 | a:visited { color: yellow;} |
input:focus | 表单项获得焦点时触发的状态 | input:focus {background-color: red;} |
p:first-child | 选择父元素的第一个子元素为 <p></p> 标签的这个 <p></p> 元素 | p:first-child {color: green;} |
p:last-child | 选择父元素的最后一个子元素为 <p></p> 标签的这个 <p></p> 元素 | p:last-child {color: blue;} |
5 伪元素
说到伪类选择器，就顺便说一下和伪类选择器很像的伪元素。伪元素不能算是一种选择器，但是它可以用来添加一些选择器的特殊效果。
常见的伪元素：
| 伪元素 | 描述 | 实例 |
|---|---|---|
::first-letter | 选择指定元素的第一个字母 | span::first-letter {color: blue;} |
::first-line | 选择指定元素的第一行 | div::first-line {color: red;} |
::before | 在指定元素之前添加内容 | p::before {content: "在之前添加";} |
::after | 在指定元素之后添加内容 | div::after {content: "在之后添加";} |
::selection | 选择指定元素中被用户选中的内容 | ::selection {} |
6 伪类和伪元素的异同点
- 伪类是通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
- 伪元素是创建不存在于DOM树中的一些抽象元素。
- 两者都是为了格式化DOM树以外的信息。
- 两者的根本区别为是否创建了新的元素。伪类没有创建新元素，伪元素创建了新的元素。
- 伪类本质上是类，在一个选择器上可以出现多个伪类。
- 有些伪类是互斥的，但是也可以用在同一个选择器上，最终效果符合就近原则。
- 伪元素本质上是元素，在一个选择器上只能出现一次，且只能出现在选择器末尾。
- 伪元素和伪类名都对大小写不敏感。
- 伪元素可以用
:，也可以用::，用::是为了区分伪元素和伪类。 - CSS3 规定伪元素使用
::， CSS2 规定伪元素使用:。 CSS2 的兼容性比较好。 - 伪类前面可以没有选择器，如
:focus意为只要页面上有一个元素获得了焦点，就设置伪类定义的样式，伪元素必须作用在选择器上。
