Skip to main content

选择器

通用选择器​

也称为通配符，可以匹配任何元素。

* {
  color: hotpink;
}

标签选择器​

标签选择器直接匹配 HTML 元素。

section {
  padding: 2em;
}

类选择器​

一个 HTML 元素可以在其 class 属性中定义一个或多个项目。类选择器匹配应用类的任何元素。

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
.my-class {
  color: red;
}

ID选择器​

具有 id 属性的 HTML 元素应该是页面上具有 ID 值的唯一元素。

<div id="rad"></div>
#rad {
  border: 1px solid blue;
}

属性选择器​

可以使用属性选择器查找具有特定 HTML 属性或具有特定 HTML 属性值的元素。

<div data-type="primary"></div>
[data-type='primary'] {
  color: red;
}

还可以查找具有该属性的元素，而不管其值如何。

[data-type] {
  color: red;
}

还可以访问与属性值内的字符串部分匹配的运算符。

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

分组选择器​

选择器不必只匹配单个元素，可以用逗号分隔多个选择器。

strong,
em,
.my-class,
[lang] {
  color: red;
}

伪类​

用于选择 HTML 元素的特定状态或位置。

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

伪元素​

伪元素与伪类不同，因为它们不是选择 HTML 元素的特定状态，而是像使用 CSS 插入新元素一样。

可以使用 ::before 伪元素在元素的开头插入内容，或使用 ::after 伪元素在元素的末尾插入内容。

.my-element::before {
  content: 'Prefix - ';
}

还可以使用它们来定位元素的特定部分。例如，假设您有一个列表，则可以使用 ::marker 为列表中的每个项目符号点（或数字）设置样式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

还可以使用 ::selection 为用户突出显示的内容设置样式。

::selection {
  background: black;
  color: white;
}

连结符​

连结符位于两个选择器之间。

后代连结符​

后代连结符允许我们定位子元素。

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
p strong {
  color: blue;
}

下一个同级连接符​

可以使用下面的选择器向 p 标签的所有子元素添加边距。

p * {
  margin-top: 1px;
}

后续同级连结符​

后续连结符与下一个同级选择器非常相似，但是使用 ~ 字符。

p ~ strong{
  margin-top: 1px;
}

子级连结符​

可以将连结符选择器限制为仅应用于直接子级。

p * + * {
  margin-top: 1px;
}

复合选择器​

可以组合选择器以提高特异性和可读性。

用于定位同样具有 .my-class 类的 <a> 元素

a.my-class {
  color: red;
}