Skip to main content

css 選擇器

選擇器種類​

  1. Attribute selectors
  2. Class selectors - 常見就不說了
  3. ID selectors - 常見就不說了
  4. Type selectors - 常見就不說了
  5. Universal selectors

Attribute selectors​

/* 存在 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;
}

/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
    padding: 2px;
}

語法​

  • [attr]

    表示带有以 attr 命名的属性的元素。

  • [attr=value]

    表示带有以 attr 命名的属性，且属性值为 value 的元素。

  • [attr~=value]

    表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

  • [attr|=value]

    表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。

  • [attr^=value]

    表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

  • [attr$=value]

    表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

  • [attr*=value]

    表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

  • [attr operator value i]

    在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

  • [attr operator value s] 实验性

    在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

Universal selectors​

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

在 CSS3 中，星号 (*) 可以和命名空间组合使用：

  • ns|* - 会匹配ns命名空间下的所有元素
  • *|* - 会匹配所有命名空间下的所有元素
  • |* - 会匹配所有没有命名空间的元素

示例​

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

Copy to Clipboard

上面的 CSS 作用于下面的 HTML:

<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

Selector​

has​

語法

:has(<complex-selector-list >) {
    /* ... */
}

範例

<section>
    <article>
        <h1>Morning Times</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </article>
    <article>
        <h1>Morning Times</h1>
        <h2>Delivering you news every morning</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </article>
</section>
h1,
h2 {
    margin: 0 0 1rem 0;
}

h1:has(+ h2) {
    margin: 0 0 0.25rem 0;
}

截圖 2023-05-25 下午3.33.25

not​

語法

:not(<complex-selector-list>) {
  /* ... */
}

範例

<p><b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost the same as an Earth day, only <strong>37 minutes</strong> longer.</p>

<p class="irrelevant">
    <b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory is designing mission concepts to survive the <b>Venus</b>
    extreme temperatures and atmospheric pressure.
</p>
p:not(.irrelevant) {
    font-weight: bold;
}

p > strong,
p > b.important {
    color: crimson;
}

p > :not(strong, b.important) {
    color: darkmagenta;
}

截圖 2023-05-25 下午3.40.57