PHP小码农

Appearance

高级选择器 ​

CSS 的高级选择器能够让开发者更加精确地选择 HTML 元素，用于实现复杂的样式效果。以下是一些常见的高级选择器及其用法：

属性选择器 ​

  • [attribute]: 选择带有指定属性的元素。
  • [attribute=value]: 选择带有指定属性和值的元素。
  • [attribute~=value]: 选择带有指定属性和值的元素，属性值以空格分隔。
  • [attribute|=value]: 选择带有指定属性和值的元素，属性值以 - 分隔。
  • [attribute^=value]: 选择带有指定属性和值的元素，属性值以指定值开头。
  • [attribute$=value]: 选择带有指定属性和值的元素，属性值以指定值结尾。
  • [attribute*=value]: 选择带有指定属性和值的元素，属性值包含指定值。

属性选择器-示例 ​

html

<div class="box" data-id="123">Box</div>
<div class="box" data-id="456">Box</div>
<div class="box" data-id="789">Box</div>
<style>
    /*选择带有 data-id 属性的元素*/
    .box[data-id] {
        border: 1px solid black;
    }

    /*选择带有 data-id 属性值为 123 的元素*/
    .box[data-id="123"] {
        background-color: red;
    }

    /*选择带有 data-id 属性值为123 或 456 或 789 的元素*/
    .box[data-id~="123 456 789"] {
        background-color: blue;
    }

    /*选择带有指定属性和值的元素，属性值以 `-` 分隔*/
    .box[data-id|="123-456"] {
        background-color: yellow;
    }

    /*选择带有 data-id 属性值以 456 开头的元素*/
    .box[data-id^="456"] {
        background-color: green;
    }

    /*选择带有 data-id 属性值以 456 或 789 结尾的元素*/
    .box[data-id$="456 789"] {
        background-color: orange;
    }

    /*选择带有 data-id 属性值包含 456 或 789 的元素*/
    .box[data-id*="456 789"] {
        background-color: pink;
    }
</style>

伪类选择器 ​

  • :link: 选择未被访问的链接。
  • :visited: 选择已被访问的链接。
  • :active: 选择正在被用户激活的元素。
  • :hover: 选择鼠标悬停在元素上的元素。
  • :focus: 选择获得焦点的元素。
  • :before: 在元素之前插入内容。
  • :after: 在元素之后插入内容。
  • :last-child: 选择最后一个子元素。
  • :nth-child(n): 选择第 n 个子元素。
  • :nth-last-child(n): 选择倒数第 n 个子元素。
  • :first-line: 选择元素的第一行。
  • :first-letter: 选择元素的第一个字母。
  • :first-child: 选择第一个子元素。
  • :first-of-type: 选择同类型元素中的第一个元素。
  • :last-of-type: 选择同类型元素中的最后一个元素。
  • :nth-of-type(n): 选择同类型元素中的第 n 个元素。
  • :nth-last-of-type(n): 选择同类型元素中的倒数第 n 个元素。
  • :not(selector): 选择不匹配指定选择器的元素。
  • :enabled: 选择启用的元素。
  • :disabled: 选择禁用的元素。
  • :checked: 选择选中的 checkbox 或 radio 元素。
  • :empty: 选择没有子元素的元素。
  • :root: 选择文档的根元素。
  • :target: 选择当前活动的锚点元素。
  • :lang(language): 选择带有指定语言的元素。

伪类选择器-示例 ​

html
<a href="#">Link</a>
<a href="#" class="active">Active Link</a>
<a href="#" class="visited">Visited Link</a>
<a href="#" class="hover">Hover Link</a>
<input type="text" value="Input">
<input type="text" value="Focus" autofocus>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph with <span>a span</span>.</p>
<p>This is a paragraph with <span>another span</span>.</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span>.</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span> and <span>a third span</span>.</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span> and <span>a third span</span> and <span>a fourth span</span>.
</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span> and <span>a third span</span> and <span>a fourth span</span>
    and <span>a fifth span</span>.</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span> and <span>a third span</span> and <span>a fourth span</span>
    and <span>a fifth span</span> and <span>a sixth span</span>.</p>
<p>This is a paragraph with <span>a span</span> and <span>another span</span> and <span>a third span</span> and <span>a fourth span</span>
    and <span>a fifth span</span> and <span>a sixth span</span> and <span>a seventh span</span>.</p>
<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
    }

    /*选择已被访问的链接*/
    a:visited {
        color: purple;
    }

    /*选择正在被用户激活的元素*/
    a:active {
        color: green;
    }

    /*选择鼠标悬停在元素上的元素*/
    a:hover {
        color: orange;
    }

    /*选择获得焦点的元素*/
    input:focus {
        border: 1px solid red;
    }

    /*在元素之前插入内容*/
    p:before {
        content: "This is a ";
    }

    /*在元素之后插入内容*/
    p:after {
        content: " paragraph.";
    }

    /*选择最后一个子元素*/
    p:last-child {
        color: red;
    }

    /*选择第 n 个子元素*/
    p:nth-child(2) {
        color: blue;
    }

    /*选择倒数第 n 个子元素*/
    p:nth-last-child(2) {
        color: purple;
    }

    /*选择元素的第一行*/
    p:first-line {
        color: green;
    }

    /*选择元素的第一个字母*/
    p:first-letter {
        color: orange;
    }

    /*选择第一个子元素*/
    p:first-child {
        color: red;
    }

    /*选择同类型元素中的第一个元素*/
    p:first-of-type {
        color: blue;
    }

    /*选择同类型元素中的最后一个元素*/
    p:last-of-type {
        color: purple;
    }

    /*选择同类型元素中的第 n 个元素*/
    p:nth-of-type(2) {
        color: green;
    }

    /*选择同类型元素中的倒数第 n 个元素*/
    p:nth-last-of-type(2) {
        color: orange;
    }

    /*选择不匹配指定选择器的元素*/
    p:not(:first-child) {
        color: red;
    }

    /*选择启用的元素*/
    input:enabled {
        background-color: yellow;
    }

    /*选择禁用的元素*/
    input:disabled {
        background-color: gray;
    }

    /*选择选中的 checkbox 或 radio 元素*/
    input:checked {
        background-color: green;
    }

    /*选择没有子元素的元素*/
    p:empty {
        color: gray;
    }

    /*选择文档的根元素*/
    :root {
        font-size: 16px;
    }

    /*选择当前活动的锚点元素*/
    a[href="#"]:target {
        background-color: yellow;
    }

    /*选择带有指定语言的元素*/
    p:lang(en) {
        font-style: italic;
    }
</style>

组合选择器 ​

  • 后代选择器（空格）: 选择某元素内的所有匹配子元素。
  • 子元素选择器（>）: 选择某元素的直接子元素。
  • 相邻兄弟选择器（+）: 选择紧接着某元素之后的同级元素。
  • 通用兄弟选择器（~）: 选择某元素之后的所有同级元素。

组合选择器-示例 ​

html

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
    <div class="child">Child 5</div>
</div>
<style>
    /*选择 .parent 元素内的所有 .child 元素*/
    .parent .child {
        color: red;
    }

    /*选择 .parent 元素的直接子元素*/
    .parent > .child {
        color: blue;
    }

    /*选择紧接着 .child 元素之后的同级元素*/
    .child + .child {
        color: green;
    }

    /*选择 .child 元素之后的所有同级元素*/
    .child ~ .child {
        color: purple;
    }
</style>

复杂的结构选择器 ​

  • 选择列表的前 3 项：
css
li:nth-child(-n+3) {
    color: red;
}
  • 选择包含特定内容的元素：
css
p:has(a) {
    background-color: #f0f8ff;
}

:is()和:where() ​

简化复杂选择器，同时可以提供优先级控制。

  • :is() 选择器：优先级高于 :not()，可以同时选择多个选择器。
  • :where() 选择器：优先级低于 :not()，可以同时选择多个选择器。
html

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
    /*选择 .box 元素*/
    .box {
        border: 1px solid black;
    }

    /*选择 .box 元素的第 2 个和第 4 个*/
    .box:is(:nth-child(2), :nth-child(4)) {
        background-color: red;
    }

    /*选择 .box 元素的第 2 个和第 4 个*/
    .box:where(:nth-child(2), :nth-child(4)) {
        background-color: blue;
    }
</style>