CSS学习笔记｜MDN-CSS选择器

发表于 分类于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

记录在MDN学习CSS中的一些个人笔记。

选择器种类

通配选择器

或叫全局选择器。选中所有元素。

1
* {}

标签、类、ID选择器

标签选择器。选择所有的 h1 元素

1
h1 { }

类选择器。选择类名有 box 的元素

1
.box { }

ID选择器。选择 ID 为 aid 的元素

1
#aid { }

标签+类/ID，选择含有指定类/ID的某标签元素。

选择类名为 aclass 的 h1 元素。

选择 ID 名为 aid 的 h1 元素。

1
2
h1.aclass { }
h1#aid { }

标签属性选择器

存在title属性的 a 标签元素

1
a[title] { }

存在href属性且为 xxx 的 a 标签元素

1
a[href="xxx"] {}

更多

伪类与伪元素选择器

伪类选择器， :hover 当鼠标悬浮与 a 上时样式。

1
a:hover { }

伪元素选择器，选择元素的某一个部分。 ::first-line 选择元素的第一行。

1
p::first-line { }

伪元素之 ::before ::after

常与 content 用于在选中的元素前后插入内容。

但通常不插入文字，如果插入文字为何不直接写在元素自身呢？且对于一些屏幕阅读器来说是不可见的，因此一般用于插入图标/符号。或者设置空字符串，利用 CSS 绘制外观。如：

1
<p>这是一个段落</p>
1
2
3
4
5
6
p::before {
  content: "✅";
}
p::after {
  content: "❤️这是after";
}

效果

伪元素选择器beforeafter示例

更多

关系选择器/运算符

组合起来，作为更复杂的选择器。 , > , + , ~

后代选择器

选择 .bt 匹配的元素下的所有 p 元素，无论是子还是孙。

1
.bt p { }

子代关系选择器

选择 .bt 匹配的元素下的直接子元素的 p 元素。

1
.bt > p { }

相邻兄弟选择器

选择紧跟在 p 元素后的 img 元素，而不是 p 元素和 img 元素一起选。

1
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 通用兄弟

一些注意注意事项

选择第二个 li 标签

假设有一段这样的 html

1
2
3
4
5
6
7
<ul>
  <div class='ul-div'>1-ul-div</div>
  <li class='ul-li'>2-ul-li</li>
  <li>3-ul-li</li>
  <li>4-ul-li</li>
  <li>5-ul-li</li>
</ul>

如何选择第二个 li 标签，也就是内容为“3-ul-li”的 li 标签。

按照直觉，我们编写了这样的选择器

1
2
3
li:nth-child(2) {
  background-color: red;
}

而实际是内容 “2-ul-li” 响应了。

因为 li:nth-child(2) 选择器正在选择其父元素的第二个子元素，而不是第二个 li 元素。

选择第二个 li 标签，有两种方式

  1. 过滤
1
2
3
li:nth-child(2 of li) {
  background-color: red;
}

2 of li ：过滤取得 li 标签列表，再选择第二个

  1. nth-of-type
1
2
3
li:nth-of-type(2) {
  background-color: red;
}

课后练习：小试牛刀答案

Selectors One

1
2
3
4
5
6
7
8
9
10
h1 {
    color: blue;
}
h2 {
    color: white;
    background-color: blue;
}
span {
    font-size: 200%;
}

Selectors Two

1
2
3
4
5
6
7
8
9
10
11
12
#special {
  background-color: yellow;
}
.alert {
  border: 1px solid grey;
}
.alert.stop {
  background-color: red;
}
.alert.go {
  background-color: green;
}

Selectors Three

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
3
4
5
6
7
h2 + p {
    color: red;
}
ul.list > li {
  list-style: none;
  border-bottom: 1px solid gray;
}

Selectors Five

1
2
3
4
5
6
7
8
9
a[title] {
    border-color: pink;
}
a[href*="contact"] {
    border-color: orange;
}
a[href^="https"] {
    border-color: green;
}

参考自

MDN-CSS选择器

CSS 选择器，一篇就够了