CSS 系列之CSS 选择器

发表于 分类于 阅读次数： 5.3k 13 分钟
CSS 系列的第三篇文章，选择器，对 CSS 选择器感到陌生的同学，来这里!

CSS 选择器 规定了 CSS 规则会被应用到哪些元素上。

基本选择器

通用选择器

通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。

重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。不会有太多的情况下，您想使用此选择。

1
2
3
4
5
6
7
8
9
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}
* {
  /*匹配所有标签*/
  color: white;
}
1
2
3
4
5
6
7
<div class="box">
  <div>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>box2</div>
</div>

通过通用选择器 * 将字体颜色改为白色，这是显示就是所有的元素字体颜色都是白色。

selector1

元素选择器（标签选择器）

此选择器只是一个选择器名和指定 HTML 元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。

1
2
3
4
5
6
7
8
9
10
11
div {
  /* 匹配所有div标签 */
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}
p {
  /* 匹配所有p标签 */
  color: rgba(22, 22, 11, 0.411);
}
1
2
3
4
5
6
7
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
<div></div>
<p>5</p>
<p>6</p>

selector2

类选择器

类选择器是由一个 .加类名组成。类名是 HTML 元素的 class 属性中没有空格元素的任何值。

  • 在类名中，如果出现了空格，则表示单个元素又多个类名。
1
2
3
4
5
6
7
8
9
10
11
12
.box {
  /* 匹配第一个与第二个 div 标签 */
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

.colorBox {
  /* 匹配第二个 div 标签 */
  background-color: red;
}
1
2
<div class="box"></div>
<div class="box colorBox"></div>

selector3

ID 选择器

ID 选择器由 # 与 ID 名称组成。ID 名称则是有元素的 id 属性来设置。任何元素都有 id 属性。
注意： id 名称是唯一的

1
2
3
4
5
6
7
8
9
10
11
12
13
#idBox {
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

#idColorBox {
  background-color: red;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}
1
2
<div id="idBox"></div>
<div id="idColorBox"></div>

显示结果与类选择器相同。

属性选择器

属性选择器，就是通过已经存在的属性名或属性值匹配到对应元素。写法由 [] 组成，[] 中包含属性名称以及匹配属性的值。

  • **[attr]**：该选择器选择包含 attr 属性的所有元素。
  • **[attr=value]**：该选择器仅选择 attr 属性被赋值为 value 的所有元素。
  • **[attr~=value]**：该选择器仅选择 attr 属性的值中有包含 value 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
  • [attr|=value]：选择 attr 属性的值为 value 或 以 value- 开头的元素。
  • **[attr^=value]**：选择 attr 属性的值以 value 开头的元素。
  • **[attr$=value]**：选择 attr 属性的值以 value 结尾的元素。
  • **[attr*=value]**：选择 attr 属性的值中包含字符串 value 的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
div[title] {
  /* 匹配所有存在 title 属性的 div */
  background-color: pink; /* 默认颜色 */
  margin-top: 10px;
  width: 100px;
  height: 100px;
}
div[title='two'] {
  /* 匹配所有 title 属性值为 two 的 div */
  background-color: red;
}
div[title~='four'] {
  /* 匹配所有 title 属性值中包含 four 的所有 div */
  background-color: orange;
}
div[title|='five'] {
  /* 匹配所有 title 属性值为 five 或以 five- 开头的 div */
  background-color: yellow;
}
div[title^='si'] {
  /* 匹配所有 title 属性值以 si 开头的 div */
  background-color: green;
}
div[title$='en'] {
  /* 匹配所有 title属性值以 en 结尾的 div */
  background-color: turquoise;
}
div[title*='gh'] {
  /* 匹配 title 属性值中包含字符串 gh 的 div */
  background-color: blue;
}
1
2
3
4
5
6
7
8
9
<div title="one">[attr]</div>
<div title="two">[attr=value]</div>
<div title="three four">[attr~=value]</div>
<div title="five-test">[attr|=value]</div>
<div title="fiveNo">[attr|=value]</div>
<div title="six">[attr^=value]</div>
<div title="seven">[attr$=value]</div>
<div title="eight">[attr*=value]</div>
<p title="gh">我是p标签，不是 div，所以跟我无关</p>

selector4

分组选择器

选择器列表

选择器列表，常称为并集选择器或并集组合器，选择所有能被选择器列表中任何一个选择器选中的节点。
选择器由 , 隔开。只要满足列表中一个即可匹配。

1
2
3
4
5
6
7
8
.one,
.two,
p {
  background-color: pink; /* 默认颜色 */
  margin-top: 10px;
  width: 100px;
  height: 100px;
}
1
2
3
<div class="one">我是 div one</div>
<div class="two">div two</div>
<p>p</p>

selector5

组合器

在 CSS 中，组合器允许您将多个选择器组合在一起，这允许您在其他元素中选择元素，或者与其他元素相邻。四种可用的类型是：

  • 后代组合器：使用 空格，允许选择嵌套在另一个元素中的某个元素（不一定是直接的后代;例如，它可以是一个孙子）。
  • 直接子组合器：使用 > 允许您选择一个元素，该元素是另一个元素的直接子元素。
  • 紧邻兄弟组合器：使用 + 允许选择一个元素，它是另一个元素的直接兄弟元素(在层次结构的同一层)。
  • 一般兄弟组合器： ~ 允许您选择其他元素的兄弟元素(例如，在层次结构中的相同级别，但不一定就在它的旁边)。
组合器 作用
A B 匹配任意元素，满足条件：B 是 A 的后代结点（B 是 A 的子节点，或者 A 的孙子节点）
A > B 匹配任意元素，满足条件：B 是 A 的直接子节点（B 是 A 的子节点）
A + B 匹配任意元素，满足条件：B 是 A 的下一个兄弟节点（AB 有相同的父结点，并且 B 紧跟在 A 的后面）
A ~ B 匹配任意元素，满足条件：B 是 A 之后的兄弟节点中的任意一个（ A B 有相同的父节点，B 在 A 之后，可以不紧跟在 A 之后）

注：相邻兄弟选择器和通用兄弟选择器只会“向后”选择，DOM 结构靠前的兄弟元素不在选择范围内。

我们用一个简单的例子来看吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
.box p {
  color: red;
}
.box > div {
  /* 匹配 class 值为 box 下的直接子节点的 div 元素 */
  color: orange;
}
.box + p {
  color: #999;
}
.box ~ div {
  color: turquoise;
}
1
2
3
4
5
6
7
8
9
10
11
12
<div class="box">
  <p>后代组合器 - 子节点</p>
  <div>
    box 的直接子节点
    <p>后代组合器 - 孙子节点</p>
  </div>
  <div>box 的直接子节点2</div>
  <div>box 的直接子节点3</div>
</div>
<p>紧邻兄弟节点，只有一个</p>
<p>不是紧邻兄弟节点</p>
<div>一般兄弟组合器</div>

selector6

伪选择器

伪类

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。我们来举个例子，当我们鼠标放到元素上时显示小手，或者字体改变颜色。

1
2
3
4
5
6
7
8
9
10
.box {
  width: 200px;
  height: 200px;
  background-color: #efcca1;
}
.box:hover {
  color: #1890ff;
  cursor: pointer;
  background-color: #f6dd9e;
}
1
<div class="box">放鼠标</div>

selector7

伪类有许多类型，如果想查看更多，可以去 MDN 查看。

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但伪元素前缀是两个冒号 (::)，同样是添加到选择器后面达到指定某个元素的某个部分。
我们用一个简单的例子来看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
  position: relative;
  margin-left: 20px;
}
.box::before {
  position: absolute;
  content: ' ';
  background-color: #1890ff;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  left: -20px;
  top: 2px;
}
1
<div class="box">我是测试元素</div>

selector8

那我们看看结果图吧，然后在看看元素情况图。

selector9

这时候，我们就发现了，伪元素是不占用 DOM 节点的，一样可以画一个圆。这对我们的程序是有优化的。

伪元素也有许多类型，如果想查看更多，可以去 MDN 查看。

相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------