CSS Selectors 101：精准定位元素

Source: Dev.to

介绍

CSS 选择器是用于选择要为其设置样式的 HTML 元素的模式。没有它们，你就无法为页面应用颜色、字体或布局。

元素选择器

针对特定类型的所有元素，例如所有段落：

p {
  color: blue;
}

所有段落文本将显示为蓝色。

类选择器

在类名前加上 .。

.highlight {
  color: red;
}

Test

Test

ID 选择器

ID 是单个特定元素的唯一标识符。每个 ID 在页面中只能出现一次。

#header {
  font-size: 30px;
}

## Heading

组合选择器

使用逗号将选择器组合，以对多个元素应用相同的样式。

h1, h2, h3 {
  font-family: arial;
}

后代选择器

定位位于其他元素内部的元素。

article p {
  color: blue;
}

选择器优先级：基础

当多个选择器针对同一元素时，CSS 会根据特异性决定应用哪种样式：

ID 选择器 > 类选择器 > 元素选择器

What a color?