前端基础

CSS选择器

约 2051 字大约 7 分钟

css

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 伪类选择器

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

...
  <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

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

匹配有链接锚点的元素,而不管元素是否被访问过。 即会匹配每一个有 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>
...