除了 id 之外的 css 目标

CSS 是一种用来控制 HTML 页面样式的语言，其中常常需要针对元素选择器进行样式设置。除了 id 选择器以外，还有其他的选择器可以帮助我们定位元素并设置样式。本文将介绍除了 id 选择器以外的其他常用样式选择器。

类选择器

类选择器是在 HTML 元素中指定一个 class 属性，并在 CSS 样式表中进行匹配的选择器。类选择器以“.”作为前缀，后跟类名称，如下所示：

.blog {
  font-size: 14px;
  color: #333;
}

上述代码中的 CSS 类选择器“.blog”会匹配所有 HTML 元素中 class 属性为“blog”的元素，并设置字体大小为 14 像素，字体颜色为 #333。

元素选择器

元素选择器是指直接针对 HTML 元素名进行样式设置的选择器，例如：

p {
  font-size: 16px;
  line-height: 1.5;
}

上述代码中的 CSS 元素选择器“p”会匹配所有 HTML 元素中的“p”标签元素，并设置字体大小为 16 像素，行高为 1.5。

属性选择器

属性选择器是使用元素的某个属性进行匹配的选择器，例如：

input[type="text"] {
  border: 1px solid #ccc;
}

上述代码中的 CSS 属性选择器“input[type='text']”会匹配所有 type 属性为“text”的 input 元素，并设置边框样式为“1px实线，边框颜色为#ccc”。

伪元素选择器

伪元素选择器是指用来选择元素中的某个子元素，而这个子元素并不是实际存在于文档结构中的元素，例如：

p::before {
  content: "《";
  font-size: 20px;
}

上述代码中的 CSS 伪元素选择器“p::before”会在所有的 p 元素前添加一个“《”符号，并将字体大小设置为 20 像素。

除了上述常用的选择器之外，还有众多其他类型的选择器，如通配符选择器、子选择器、相邻兄弟选择器、后代选择器等等，完整的选择器列表可以在 MDN 文档中查看。