跳到主要内容

伪类选择器

2023年02月14日
柏拉文
越努力，越幸运
前言

概念: 伪类是选择器的一种，它用于选择处于特定状态的元素。伪类开头为冒号:

对比: 伪类与伪元素有什么区别?

  • 伪类: 能够根据状态改变元素样式, 可以将样式应用于该元素

  • 伪元素: 可以设置元素特定部分的样式,像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用

一、结构伪类​

element:dir​

element:dir 基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。

element:is()​

element:is() 匹配传入的选择器列表中的任何选择器。

语法

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

// 等同于  

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

// 等同于 

:is(header, main, footer) p:hover{
    color: red;
    cursor: pointer;
}

对比:

  • 对比一、:is() 与 :where() 的区别?

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

    • :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

element:lang​

element:lang 基于语言（HTMLlang属性的值）匹配元素。

element:left​

element:left 在分页媒体 (en-US)中，匹配左手边的页。

element:root​

element:root 匹配文档的根元素。

element:past​

element:past 匹配当前元素之前的元素。

element:empty​

element:empty 匹配除了可能存在的空格外，没有子元素的元素。

element:first​

element:first 匹配分页媒体的第一页。

element:right​

element:right 在分页媒体 (en-US)中，匹配右手边的页。

element:scope​

element:scope 匹配任何为参考点元素的的元素。

element:where​

element:where 接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

语法

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

// 等同于  

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

// 等同于 

:is(header, main, footer) p:hover{
    color: red;
    cursor: pointer;
}

对比:

  • 对比一、:is() 与 :where() 的区别?

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

    • :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

element:future​

element:future 匹配当前元素之后的元素。

element:in-range​

element:in-range 用一个区间匹配元素，当值处于区间之内时匹配。

element:last-child​

element:last-child 匹配兄弟元素中最末的那个元素。

element:only-child​

element:only-child 匹配没有兄弟元素的元素。

element:first-child​

element:first-child 匹配兄弟元素中的第一个元素。

element:nth-child(n)​

element:nth-child(n) 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。

element:out-of-range​

element:out-of-range 按区间匹配元素，当值不在区间内的的时候匹配。

element:last-of-type​

element:last-of-type 匹配兄弟元素中最后一个某种类型的元素。

element:only-of-type​

element:only-of-type 匹配兄弟元素中某类型仅有的元素。

element:first-of-type​

element:first-of-type 匹配兄弟元素中第一个某种类型的元素。

element:nth-of-type(n)​

element:nth-of-type(n) 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。

element:nth-last-child(n)​

element:nth-last-child(n) 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。

element:nth-last-of-type(n)​

element:nth-last-of-type(n) 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。

二、否定伪类​

element:not()​

element:not() 匹配作为值传入自身的选择器未匹配的物件。

语法

:not(element) {
    // CSS Property
}

场景

  • 场景一

    <style>
        .a:not(.b){
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

    <div class="a"></div>
    <div class="a b"></div>

三、UI 元素状态伪类​

element:valid​

element:valid 匹配诸如<input>元素的处于可用状态的元素。

element:paused​

element:paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。

element:current​

element:current 匹配正在展示的元素，或者其上级元素。

element:checked​

element:checked 匹配处于选中状态的单选或者复选框。

element:default​

element:default 匹配一组相似的元素中默认的一个或者更多的 UI 元素

element:enabled​

element:enabled 匹配处于开启状态的用户界面元素。

element:invalid​

element:invalid 匹配诸如<input>的位于不可用状态的元素。

element:playing​

element:playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。

element:disabled​

element:disabled 匹配处于关闭状态的用户界面元素

element:optional​

element:optional 匹配不是必填的 form 元素。

element:required​

element:required 匹配必填的 form 元素。

element:read-only​

element:read-only 匹配用户不可更改的元素。

element:read-write​

element:read-write 匹配用户可更改的元素。

element:indeterminate​

element:indeterminate 匹配未定态值的 UI 元素，通常为复选框。

element:placeholder-shown​

element:placeholder-shown 匹配显示占位文字的 input 元素。

四、动态伪类（用户行为伪类）​

element:link​

element:link 匹配未曾访问的链接。

element:blank​

element:blank 匹配空输入值的<input>元素。

element:focus​

element:focus 当一个元素有焦点的时候匹配。

element:hover​

element:hover 当用户悬浮到一个元素之上的时候匹配。

element:active​

element:active 在用户激活（例如点击）元素的时候匹配。

element:target​

element:target 匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。

element:visited​

element:visited 匹配已访问链接

element:any-link​

element:any-link 匹配一个链接的:link和:visited状态。

element:local-link​

element:local-link 匹配指向和当前文档同一网站页面的链接。

element:focus-within​

element:focus-within 匹配有焦点的元素，以及子代元素有焦点的元素。

语法

<div class="input-container">
    <input type="text">
</div>

element:focus-visible​

element:focus-visible 当元素有焦点，且焦点对用户可见的时候匹配。

五、问题​

5.1 伪元素和伪类的区别和作用？​

  • 伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

    a:hover {color: #FF00FF}
    p:first-child {color: red}

  • 伪元素: 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

    p::before {content:"第一章：";}
    p::after {content:"Hot!";}
    p::first-line {background:red;}
    p::first-letter {font-size:30px;}

总结: 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。