CSS 选择器

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

基本选择器

通用选择器

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

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

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}
* {
  /*匹配所有标签*/
  color: white;
}

<div class="box">
  <div>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>box2</div>
</div>

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

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

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

div {
  /* 匹配所有div标签 */
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}
p {
  /* 匹配所有p标签 */
  color: rgba(22, 22, 11, 0.411);
}

<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>

类选择器

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

在类名中，如果出现了空格，则表示单个元素又多个类名。

.box {
  /* 匹配第一个与第二个 div 标签 */
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

.colorBox {
  /* 匹配第二个 div 标签 */
  background-color: red;
}

<div class="box"></div>
<div class="box colorBox"></div>

ID 选择器

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

#idBox {
  background-color: pink;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

#idColorBox {
  background-color: red;
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

<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 的元素。

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;
}

<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>

分组选择器

选择器列表

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

.one,
.two,
p {
  background-color: pink; /* 默认颜色 */
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

<div class="one">我是 div one</div>
<div class="two">div two</div>
<p>p</p>

组合器

在 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 结构靠前的兄弟元素不在选择范围内。

我们用一个简单的

.box p {
  color: red;
}
.box > div {
  /* 匹配 class 值为 box 下的直接子节点的 div 元素 */
  color: orange;
}
.box + p {
  color: #999;
}
.box ~ div {
  color: turquoise;
}

<div class="box">
  <div>
    box 的直接子节点
    <p>后代组合器</p>
  </div>
  <div>box 的直接子节点2</div>
  <div>box 的直接子节点3</div>
</div>
<p>紧邻兄弟节点，只有一个</p>
<p>不是紧邻兄弟节点</p>
<div>一般兄弟组合器</div>

伪选择器

伪类

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

.box {
  width: 200px;
  height: 200px;
  background-color: #efcca1;
}
.box:hover {
  color: #1890ff;
  cursor: pointer;
  background-color: #f6dd9e;
}

<div class="box">放鼠标</div>

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

伪元素

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

.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;
}

<div class="box">我是测试元素</div>

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

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

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

hzzzzzzzq / Blog

CSS 系列 - 2. CSS 选择器 #25