CSS 选择器

基本选择器

通用选择器

选择所有元素。

:::: tabs ::: tab 全局使用

* {
  padding: 0;
}

::: ::: tab 搭配其他选择器

*[lang^='en'] {
  color: green;
}
*.warning {
  color: red;
}
.floating + * {
  clear: left;
}

::: ::: tab 搭配命名空间

@namespace svg url(http://www.w3.org/2000/svg);
/* 获取svg下所有xml元素 */
svg|* {
  background-color: cornflowerblue;
}
/* 匹配所有命名空间下的所有元素 */
*|* {
  background-color: cornflowerblue;
}
/* 匹配所有没有命名空间的元素 */
|* {
  background-color: cornflowerblue;
}

::: ::::

Notice

命名空间 @namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @ 规则，详情请看：@namespace-MDN

元素选择器

span {
  background-color: DodgerBlue;
}

类选择器

:::: tabs ::: tab HTML

<span class="classy">Here's a span with some text.</span>

::: ::: tab CSS

/* 匹配所有类名为classy的元素 */
.classy {
  background-color: DodgerBlue;
}
/* 匹配类名为classy的span元素 */
span.classy {
  background-color: DodgerBlue;
}

::: ::::

ID 选择器

:::: tabs ::: tab HTML

<span id="identified">Here's a span with some text.</span>

::: ::: tab CSS

/* 匹配所有ID为identified的元素 */
#identified {
  background-color: DodgerBlue;
}
/* 匹配ID为identified的span元素 */
span#identified {
  background-color: DodgerBlue;
}

::: ::::

属性选择器

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}
/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}
/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*='example'] {
  font-size: 2em;
}
/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$='.org'] {
  font-style: italic;
}
/* 存在href属性并且属性值开头是"https"的<a> 元素 */
a[href^='https'] {
  font-style: italic;
}
/* 存在title属性并且属性值开头是"zh"或"zh-"的<span> 元素 */
span[title|='zh'] {
  font-style: italic;
}
/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~='logo'] {
  padding: 2px;
}

分组选择器

分组选择器使用 , 分隔元素。

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}

考虑以下情况:

h1 {
  font-family: sans-serif;
}
h2:before {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

我们假设 :before 是当前浏览器不支持的选择器，那么下面的代码就是无效的：

h1,
h2:before,
h3 {
  font-family: sans-serif;
}

当使用分组选择器时，如果其中有选择器是无效的，那么整条规则都会失效。在这种情况下，因此上面的两个代码块是不等价的

可以使用 :is() 选择器忽视其中失效的选择器。

:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}

组合器

后代选择器

后代选择器是用空格分隔选择器表示元素之间的父子关系。

ul.my-things li {
  margin: 2em;
}

直接子选择器

直接子选择器使用 > 匹配一个元素的直接后代。

:::: tabs ::: tab HTML

<div>
  <span>
    Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

::: ::: tab CSS

span {
  background-color: white;
}
div > span {
  background-color: DodgerBlue;
}

::: ::: tab 效果

Span 1. In the div. Span 2. In the span that's in the div.
Span 3. Not in a div at all.

::: ::::

通用兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择 A 元素之后所有同层级 B 元素。

:::: tabs ::: tab HTML

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<a>link</a>
<span>And here is a span.</span>

::: ::: tab CSS

p ~ span {
  color: red;
}

::: ::: tab 效果 This is not red.

Here is a paragraph.

linkAnd here is a span.

::: ::::

相邻兄弟选择器

:::: tabs ::: tab HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

::: ::: tab CSS

li:first-of-type + li {
  color: red;
}

::: ::: tab 效果

• One
• Two!
• Three

::: ::::

伪选择器

伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

如：

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

所有可用伪类选择器在这里：标准伪类索引-MDN

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

所有可用伪元素选择器在这里：标准伪元素索引-MDN