CSS选择器的使用技巧

当我们使用 CSS 样式来美化网页时，CSS 选择器的使用非常重要，它可以帮助我们精确地选择出需要样式化的元素。

1. 基础选择器

CSS基础选择器包括标签选择器、类选择器、ID选择器。这些选择器可以分别选择 HTML 元素的标签、class、id属性。

标签选择器

标签选择器最为常用，它可以选择页面上的所有相应元素。比如，下面的 CSS 样式将作用于页面上的所有段落元素：

p {
  font-size: 16px;
  color: red;
}

类选择器

类选择器选取的是页面上 class 属性为特定值的元素。比如，我们有这样一段 HTML：

<p class="info">这是需要特别强调的信息</p>

在 CSS 中可以这样规定样式：

.info {
  font-size: 14px;
  font-weight: bold;
}

ID 选择器

ID选择器是选取一个特定的元素。和 class 不同，页面上相同的 ID 值只允许出现一次。比如，下面的 CSS 样式将作用于 HTML 元素 id 为 "logo" 的元素上：

#logo {
  width: 100px;
  height: 50px;
  background-color: blue;
}

2. 组合选择器

组合选择器是由基础选择器进行组合或者嵌套，从而实现更加精确的选择。如：后代选择器、子选择器、相邻兄弟选择器、普通兄弟选择器。

后代选择器

后代选择器用空格隔开，用来选择所有符合条件的后代元素。比如，下面的CSS将选择所有p元素内的strong元素：

p strong {
  color: blue;
}

子选择器

子选择器使用大于号（>）进行分隔，用来选择所有符合条件的子元素。它只会选择元素层次关系为“parent > child”的元素，这里的 parent 表示父元素，child 表示子元素。如：

ul > li {
  list-style: square;
}

相邻兄弟选择器

相邻兄弟选择器使用加号（+）来分隔两个选择器。它会将与第一个选择器相邻的 第二个同级元素 选中。比如，在下面的 CSS 中，如果某个 p 元素之后紧跟着一个 h2 元素，则会应用这个规则：

p + h2 {
  color: blue;
}

普通兄弟选择器

和相邻兄弟选择器相似，普通兄弟选择器使用 ~ 分隔两个选择器，但是它不需要两个元素必须相邻。如：

h2 ~ p {
  color: red;
}

3. 属性选择器

属性选择器可以根据元素的属性值来选择元素，以达到精确控制样式的目的。常用的属性选择器有：等于选择器、包含选择器、开始于选择器、结尾于选择器、子串选择器。

等于选择器

等于选择器使用方括号[]来包含元素的属性名称和属性值。只有当元素的属性值完全等于选择器所规定的值时，这个元素才会被选中。如：

input[type="submit"] {
  font-size: 14px;
}

包含选择器

包含选择器使用 *= 进行选择，它选取页面中含有指定属性值的元素。如：

[class*="test"] {
  color: red;
}

开始于选择器

开始于选择器使用 ^= 进行选择，选取匹配指定属性开始的元素。如：

img[src^="https://"] {
  border: 1px solid red;
}

结尾于选择器

结尾于选择器使用 $= 进行选择，选取匹配指定属性结束的元素。如：

p[class$="important"] {
  font-weight: bold;
}

子串选择器

子串选择器使用 ~= 进行选择，选取和指定属性的值匹配的子字符串的元素。如：

a[hreflang~="en"] {
  color: #06c;
}

以上就是 CSS 选择器的使用技巧的完整攻略。