CSS选择器

2059字约7分钟

2018-09-20

Basic Selectors 基础选择器

Element selector

根据 element type 匹配一组元素

...
<style>
  p {
    color: red;
  }
</style>
...
<p>content</p>
...

Class selector

根据 element 声明的 class属性值匹配一组元素

...
<style>
  .red {
    color: red;
  }
</style>
...
<p class="red">content</p>
...

ID selector

根据 element 声明的 ID属性值，匹配一个元素（一个页面中，ID具有唯一性）

...
<style>
  #red {
    color: red;
  }
</style>
...
<p id="red">content</p>
...

Universal selector

通配符，匹配所有 element

...
<style>
  * {
    color: red;
  }
</style>
...
<p>content</p>
<span>span</span>
...

Attribute Selectors

[attribute] selector

匹配声明了该attribute的一组 element

...
<style>
  [href] {
    color: red;
  }
</style>
...
<a href="">content</a>
...

[attribute="x"] selector

匹配声明了该attribute，且值为 x 的一组 element

...
<style>
  [title='a'] {
    color: red;
  }
</style>
...
<abbr title="a">abbr</abbr>
...

[attribute~="x"] selector

匹配声明了该attribute，且值包含了单词 x 的一组 element

...
<style>
  [title~='style'] {
    color: red;
  } /* 匹配包含了 独立单词  style 的 element， */
</style>
...
<abbr title="sheet style">abbr</abbr>
<abbr title="sheetstyle"></abbr>
<!-- no match -->
...

[attribute|="x"] selector

匹配声明了该attribute，且值包含了一个 x- 开头的连字符拼接的词的一组 element

...
<style>
  /* lang的值必须 包含 en 通过连接符 - 连接另一个单词的 词 */
  [lang|='en'] {
    color: red;
  }
</style>
...
<abbr lang="en-US">abbr</abbr>
<!-- no match  lang="en" lang="enUS" -->
...

[attribute^="x"] selector

匹配声明了该attribute，且值是以 x 作为开头的一组 element

...
<style>
  [href^="https://"]
  {
    color: red;
  }
</style>
...
<a href="https://example.com">content</a>
...

[attribute$="x"] selector

匹配声明了该attribute，且值是以 x 作为结尾的一组 element

...
<style>
  [href$='.pdf'] {
    color: red;
  }
</style>
...
<a href="https://example.com/a.pdf">content</a>
...

[attribute*="x"] selector

匹配声明了该attribute，且值包含了子串 x 的一组 element

...
<style>
  [href*='example'] {
    color: red;
  }
</style>
...
<a href="https://example.com">content</a>
...

Combinators 关系选择器

关系选择器适用于任意选择器的组合

selector1 selector2 后代关系选择器

匹配 selector1 的元素中，所有 selector2 的元素

...
<style>
  section span {
    color: red;
  }
</style>
...
<section>
  <span></span>
  <!-- match -->
  <p><span></span></p>
  <!-- match -->
</section>
...

selector1 > selector2 子代关系选择器

匹配 selector1 的下一级满足 selector2 的一组元素

...
<style>
  section > span {
    color: red;
  }
</style>
...
<section>
  <span></span>
  <!-- match -->
  <p><span></span></p>
  <!--  no match -->
</section>
...

selector1 + selector2 相邻兄弟选择器

匹配selector1后同级的紧跟的selector2的一个元素

...
<style>
  h2 + p {
    color: red;
  }
</style>
...
<p></p>
<!--  no match -->
<h2></h2>
<p></p>
<!-- match -->
<p></p>
<!--  no match -->
...

selector ~ selector2 一般兄弟选择器

匹配selector1后同级的selector2的一组元素

...
<style>
  h2 ~ p {
    color: red;
  }
</style>
...
<p></p>
<!--  no match -->
<h2></h2>
<p></p>
<!-- match -->
<p></p>
<!-- match -->
<span></span>
<p></p>
<!-- match -->
...

Group Selectors 组合选择器

selector1, selector2

匹配用, 隔开的所有选择器

...
<style>
  p,
  span {
    color: red;
  }
</style>
...
<section>
  <span></span>
  <p><span></span></p>
</section>
...

Pseudo-elements 伪元素选择器

::first-letter

匹配 element中的首个字符（字母、中文字、符号均可）

...
<style>
  p::first-letter {
    color: red;
  }
</style>
...
<p>One</p>
<!-- match: O -->
...

::first-line

匹配 element中的首行文字

...
<style>
  p::first-line {
    color: red;
  }
</style>
...
<p>
  One Two <br />
  <!-- match -->
  Three
</p>
...

::before

和 content 属性一起使用，在匹配的元素内容之前生成的内容

...
<style>
  p::before {
    content: 'before ';
  }
</style>
...
<p>
  One Two
  <!-- render: before One Two -->
</p>
...

::after

和 content 属性一起使用，在匹配的元素内容之后生成的内容

...
<style>
  p::after {
    content: ' after';
  }
</style>
...
<p>
  One Two
  <!-- render: One Two after -->
</p>
...

Pseudo-classes 伪类选择器

:link

匹配一个没有被访问过的链接

...
<style>
  a:link {
    color: red;
  }
</style>
...
<a href="">link</a>
...

:visited

匹配一个已访问过的链接

...
<style>
  a:visited {
    color: red;
  }
</style>
...
<a href="">link</a>
...

:active

匹配一个正在被激活的链接

...
<style>
  a:active {
    color: red;
  }
</style>
...
<a href="">link</a>
...

:hover

匹配一个被光标悬停的链接

...
<style>
  a:hover {
    color: red;
  }
</style>
...
<a href="">link</a>
...

:focus

匹配一个具有焦点的元素

...
<style>
  input:focus {
    color: red;
  }
</style>
...
<input type="text" />
...

:target

匹配一个已被链接到的元素。例如通过<a href="#heading"></a>链接的head元素

...
<style>
  h2:target {
    color: red;
  }
</style>
...
<h2 id="heading">heading</h2>
...

:first-child

匹配在同一个父元素内的的第一个子元素

...
<style>
  p:first-child {
    color: red;
  }
</style>
...
<p>first child</p>
<!-- match -->
<p>second child</p>
...

:last-child

匹配在同一个父元素内的的最后一个子元素

...
<style>
  p:last-child {
    color: red;
  }
</style>
...
<p>first child</p>
<p>last child</p>
<!-- match -->
...

:nth-child(n)

匹配在同一个父元素内的从上往下数的第N子个元素

...
<style>
  p:nth-child(2) {
    color: red;
  }
</style>
...
<p>first child</p>
<p>second child</p>
<!-- match -->
...

:nth-last-child(n)

匹配在同一个父元素内的从下往上数的第N个子元素

...
<style>
  p:nth-last-child(2) {
    color: red;
  }
</style>
...
<p>first child</p>
<!-- match -->
<p>second child</p>
...

:first-of-type

匹配在同一个父元素中的同类型的第一个元素

...
<style>
  p:first-of-type {
    color: red;
  }
</style>
...
<p>first child</p>
<!-- match -->
<p>second child</p>
...

:last-of-type

匹配在同一个父元素中的同类型的最后一个元素

...
<style>
  p:last-of-type {
    color: red;
  }
</style>
...
<p>first child</p>
<!-- match -->
<p>second child</p>
...

:nth-of-type(n)

匹配在同一个父元素中的同类型的从上往下数的第N个元素

...
<style>
  p:nth-of-type(2) {
    color: red;
  }
</style>
...
<p>first child</p>
<p>second child</p>
<!-- match -->
...

:nth-last-of-type(n)

匹配在同一个父元素中的同类型的从下往上数的第N个元素

...
<style>
  p:nth-last-of-type(2) {
    color: red;
  }
</style>
...
<p>first child</p>
<!-- match -->
<p>second child</p>
...

:only-child

如果元素是其父元素的唯一子元素，则匹配该元素

...
<style>
  section p:only-child {
    color: red;
  }
</style>
...
<section>
  <p>only child</p>
</section>
...

:only-type

如果元素是其父元素的唯一的同类型的子元素，则匹配该元素

...
<style>
  section p:only-of-type {
    color: red;
  }
</style>
...
<section>
  <p>only</p>
  <!-- match -->
  <span></span>
</section>
...

:lang(lang)

匹配给定语言的元素

...
<style>
  div:lang(fr) {
    color: red;
  }
</style>
...
<section>
  <div lang="fr">
    <q>This French quote has a <q>nested</q> quote inside.</q>
  </div>
</section>
...

:empty

匹配没有子元素或内容的元素

...
<style>
  div:empty {
    background-color: red;
  }
</style>
...
<section>
  <div></div>
</section>
...

:root

匹配文档的根元素，（即匹配的 <html>元素）

:enabled

匹配未被禁用的表单控件元素

:disabled

匹配被禁用的表单控件元素

:checked

匹配选中的单选或复选框类型的输入元素。

:not(selector)

协商伪类。匹配不匹配选择器的元素。

实验中的 Selectors

这些选择器在某些浏览器中尚处于开发中，功能对应的标准文档可能被修改，在未来的版本中可能发生变化，谨慎使用。

:any-link

匹配有链接锚点的元素，而不管元素是否被访问过。即会匹配每一个有 href属性的<a>，<area>，<link>的元素，匹配到所有的:link或:visited。

...
<style>
  a:any-link {
    border: 1px solid blue;
    color: orange;
  }
</style>
...
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
...

:dir(dir)

如果元素的内容的书写方向是 dir , 则匹配该元素

dir : ltr | rtl

...
<style>
  :dir(ltr) {
    background-color: yellow;
  }

  :dir(rtl) {
    background-color: powderblue;
  }
</style>
...
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
...

:has(selector)

如果一个元素A恰好满足包含了selector 匹配的元素，则匹配元素A

...
<style>
  a:has(> img) {
    background-color: yellow;
  }
</style>
...
<a><img src="example.jpg" /></a>
<!-- match -->
<a></a>
...

:is() / :any()

匹配一组选择器选中的元素。

优先级是由它的选择器列表中优先级最高的选择器决定。

...
<style>
  :is(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
  }
</style>
...
<!-- 等价于 -->
<style>
  header p:hover,
  main p:hover,
  footer p:hover {
    color: red;
    cursor: pointer;
  }
</style>
...

:where()

匹配一组选择器选中的元素。

:where() 的优先级总是为 0。

...
<style>
  :where(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
  }
</style>
...
<!-- 等价于, 但优先级不同 -->
<style>
  header p:hover,
  main p:hover,
  footer p:hover {
    color: red;
    cursor: pointer;
  }
</style>
...