选择器
选择器是什么, 浏览器如何读取？
- 选择器: HTML 元素匹配模式;
- 作用: 定位 CSS 规则的应用目标;
- 读取顺序: 从右向左;
基础选择器有哪些？
| 选择器 | 写法 | 匹配对象 |
|---|---|---|
| 元素 | a | 指定标签 |
| 通用 | * | 所有元素 |
| class | .cls | 含该 class 的元素 |
| 元素+class | li.spacious | 同时满足元素与 class |
| 多 class | .a.b | class 列表同时含 a 和 b |
| id | #demo | 指定 id 的元素 |
| 元素+id | li#demo | 同时满足元素与 id |
li.spacious.elegant {
margin: 2em;
}
选择器列表如何一次匹配多个目标？
- 用途: 一个规则匹配多个选择器;
- 写法: 逗号分隔;
h1,
.special {
color: blue;
}
属性选择器如何匹配属性？
| 写法 | 含义 |
|---|---|
[attr] | 具有 attr 属性 |
[attr=value] | 属性值等于 value |
[attr~=value] | 属性值列表包含 value |
[attr|=value] | 等于 value 或以 value- 开头 |
[attr^=value] | 以 value 开头 |
[attr$=value] | 以 value 结尾 |
[attr*=value] | 包含 value 子串 |
[attr operator value i] | 大小写不敏感 |
a[href^="https"][href$=".org"] {
color: green;
}
组合选择器如何描述元素关系？
| 选择器 | 写法 | 匹配对象 |
|---|---|---|
| 后代 | a b | a 的所有后代 b |
| 子代 | a > b | a 的直接子元素 b |
| 相邻兄弟 | a + b | 紧邻 a 之后的同级 b |
| 通用兄弟 | a ~ b | a 之后的全部同级 b |
ul.my-things > li {
margin: 2em;
}
伪类与伪元素有什么区别？
- 伪类: 匹配元素的特定状态, 写法同 class;
- 伪元素: 匹配元素的特定部分, 写法类似虚拟元素;
button:hover {
color: blue;
}
p::first-line {
text-transform: uppercase;
}