记录在MDN学习CSS中的一些个人笔记。
选择器种类
通配选择器
或叫全局选择器。选中所有元素。
* {
}
标签、类、ID选择器
标签选择器。选择所有的 h1 元素
h1 {
}
类选择器。选择类名有 box 的元素
.box {
}
ID选择器。选择 ID 为 aid 的元素
#aid {
}
标签+类/ID，选择含有指定类/ID的某标签元素。
选择类名为 aclass 的 h1 元素。
选择 ID 名为 aid 的 h1 元素。
h1.aclass {
}
h1#aid {
}
标签属性选择器
存在title属性的 a 标签元素
a[title] {
}
存在href属性且为 xxx 的 a 标签元素
a[href="xxx"] {
}
更多
伪类与伪元素选择器
伪类选择器， :hover 当鼠标悬浮与 a 上时样式。
a:hover {
}
伪元素选择器，选择元素的某一个部分。 ::first-line 选择元素的第一行。
p::first-line {
}
伪元素之 ::before ::after
常与 content 用于在选中的元素前后插入内容。
但通常不插入文字，如果插入文字为何不直接写在元素自身呢？且对于一些屏幕阅读器来说是不可见的，因此一般用于插入图标/符号。或者设置空字符串，利用 CSS 绘制外观。如：
<p>这是一个段落</p>
p::before {
content: "✅";
}
p::after {
content: "❤️这是after";
}
效果
更多
关系选择器/运算符
组合起来，作为更复杂的选择器。, > , + , ~
后代选择器
选择 .bt 匹配的元素下的所有 p 元素，无论是子还是孙。
.bt p {
}
子代关系选择器
选择 .bt 匹配的元素下的直接子元素的 p 元素。
.bt > p {
}
相邻兄弟选择器
选择紧跟在 p 元素后的 img 元素，而不是 p 元素和 img 元素一起选。
p + img {
}
通用兄弟选择器
类似于相邻兄弟选择器，无需相邻，只需紧跟其后和同级。
- 后代选择器——
（空格键）——选择后代中所有匹配的元素，无论是子还是孙。 - 子代选择器——
>——选择直接子元素。 - 相邻兄弟选择器——
+——选择同级且相邻。（紧跟其后） - 通用兄弟选择器——
~— —同级无需相邻。（单但仍需在后面）
| Combinators | Select |
|---|---|
| A,B | 匹配满足A（和/或）B的任意元素. |
| A B | 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| A > B | 匹配任意元素，满足条件：B是A的直接子节点 |
| A + B | 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| A ~ B | 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |
选择器参考表
| 选择器 | 示例 | 学习CSS的教程 |
|---|---|---|
| 类型选择器 | h1 { } |
类型选择器 |
| 通配选择器 | * { } |
通配选择器 |
| 类选择器 | .box { } |
类选择器 |
| ID选择器 | #unique { } |
ID选择器 |
| 标签属性选择器 | a[title] { } |
标签属性选择器 |
| 伪类选择器 | p:first-child { } |
伪类 |
| 伪元素选择器 | p::first-line { } |
伪元素 |
| 后代选择器 | article p |
后代运算符 |
| 子代选择器 | article > p |
子代选择器 |
| 相邻兄弟选择器 | h1 + p |
相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p |
通用兄弟 |
课后练习：小试牛刀答案
Selectors One
h1 {
color: blue;
}
h2 {
color: white;
background-color: blue;
}
span {
font-size: 200%;
}
Selectors Two
#special {
background-color: yellow;
}
.alert {
border: 1px solid grey;
}
.alert.stop {
background-color: red;
}
.alert.go {
background-color: green;
}
Selectors Three
a {
color: orange;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
.container p:first-child {
font-size: 150%;
}
.container::first-line {
color: red;
}
tr:nth-of-type(2n) {
color: white;
background-color: #333;
}
Selectors Four
h2 + p {
color: red;
}
ul.list > li {
list-style: none;
border-bottom: 1px solid gray;
}
Selectors Five
a[title] {
border-color: pink;
}
a[href*="contact"] {
border-color: orange;
}
a[href^="https"] {
border-color: green;
}
参考自