运维做开发

这个屌丝很懒，什么也没留下！

热门标签

CSS：权威指南读书笔记第三章：伪类和伪元素选择器_css权威指南

作者：运维做开发 | 2024-08-22 02:16:42

踩

css权威指南

伪类选择器

伪类选择器是CSS中一种用于选择元素的特殊方式，通过在选择器后面使用冒号(:)和伪类名称的方式来指定。伪类选择器可以选择具有特定状态或条件的元素，而不仅仅是基于标签名或类名等静态的属性选择。

常见的伪类选择器：

1.：hover（悬停状态）
当鼠标悬停在元素上时，可以为元素定义特定的样式。例如，当鼠标悬停在链接上时，可以改变链接的颜色或背景色：

2. :active（激活状态）:
当元素被激活（例如被点击）时，可以应用特定的样式。通常在按钮或链接上使用该伪类来给用户提供点击反馈：

3. :focus（焦点状态）:
当元素获得焦点时，可以应用特定的样式。主要用于表单元素，以便在用户输入时突出显示当前焦点的元素：

4. :visited（已访问链接）:
选择已经访问过的链接，并为其设置特定的样式。这通常用于改变已访问链接的颜色，以便用户可以区分哪些链接已经点击过：

组合伪类

CSS允许将伪类组合在一起。例如，您可以使未访问的链接在悬停时显示为红色，已访问的链接在悬停时显示为深红色：

a:link:hover {color: red;}
a:visited:hover {color: maroon;}


<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title>Document</title>
  <style>
 
      a:link:hover {color: red;}
      a:visited:hover {color: maroon;}
        
  </style>
</head>
<body>
 
  <a href="https://www.baidu.com/" target="_blank">去百度</a>
</body>
</html>

您指定的顺序无关紧要；您也可以将a:hover:link编写为与a:link:hover相同的效果。

结构伪类

结构伪类有如下几种：

:root

:first-child

:last-child

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

:first-of-type

:last-of-type

:only-child

:only-of-type

:empty

选择根元素

这是结构简单性的精髓：伪类 :root 选择文档的根元素。在HTML中，这总是 <html> 元素。这个选择器的真正好处在于为XML语言编写样式表时，因为根元素在每种语言中都可能不同，例如，在SVG中，它是 <svg> 元素，而在我们早期的PlanetML示例中，它是 <pml> 元素，甚至当您在一个语言中拥有多个可能的根元素时（尽管不是在一个文档中！）。

以下是在HTML中为根元素设置样式的示例：

:root {border: 10px dotted gray;}

选择空元素

使用伪类 :empty，您可以选择任何没有子元素的元素，包括文本节点，这涵盖了文本和空格。

请注意，为了匹配一个元素，从解析角度来看，它必须是真正的空 - 没有空格、可见内容或后代元素。在以下元素中，只有第一个和最后一个会被 p:empty 匹配：

<p></p>

<p>

</p>

<p><! —-a comment--></p>第二个和第三个段落没有被 :empty 匹配，因为它们不为空：它们分别包含一个空格和一个换行字符。两者都被视为文本节点，从而阻止了空状态。最后一个段落匹配，因为注释不被视为内容，甚至不是空格。

选择唯一子元素

E:only-child，匹配那些是其父元素唯一子元素的E元素。简单来说就是匹配父元素中只有一个子元素的类型元素。

关于: only-child，您应该记住两件事。第一，您总是将其应用于希望成为唯一子元素的元素，而不是父元素。这提到了第二件事，即当您在后代选择器中使用: only-child时，您并没有将列出的元素限制为父-子关系。


a[href] img: only-child {border: 5px solid black; } 
<a href="http: //w3. org/"><img src="w3. png" alt="W3C"/></a> 
<a href="http://w3. org/" ><span><img src="w3. png" alt="W3C" /></span ></a> 
<a href="http://w3.org/" >A link to <span>the <img src="w3. png" alt="" /> web</span> site</a >

a[href] img:only-child匹配任何唯一子图像，并且该图像从a元素中派生，无论它是否是a元素的子元素。匹配时，元素image必须是其直接父元素的唯一子元素，并且是a元素的后代，但该父元素可以本身就是同一<a>元素的后代。

选择元素的特定类型并唯一的子元素

E:only-of-type匹配子元素中标签类型与E元素一致且只有一个的E元素。

: only-of-type将匹配其所有兄弟姐妹中唯一类型的元素，而:only-child仅在其元素没有任何兄弟姐妹时进行匹配。


a[href] img: only-of-type { border: 5px solid black; }
 
<a href="http: //w3. org/"><b>•</b><img src="w3. png" alt="W3C" /></a>
<a href="http: //w3. org/" ><span><b>•</b><img src="w3. png" alt="W3C" /></span ></a>

选择第一个子元素

伪类： first-child 用于选择作为其他元素的第一个子元素的元素。

例子：


p: first-child {font-weight: bold;}
li: first-child {text-transform: uppercase;}
 
<div>
<p>These are the necessary steps:</p>
<ul>
 <li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as
</p>
</div>

在此示例中，作为第一个孩子的元素是第一个 p，第一个 li 以及 strong 和 em，都是
各自父母的第一个孩子。效果如图：

最常见的错误是以为像 p：first-child 这样的选择器将选择 p 元素的第一个子元素。

选择最后一个子元素

伪类： last-child 用于选择作为其他元素的最后子元素的元素。

例子：


p: last-child {font-weight: bold;}
li: last-child {text-transform: uppercase;}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as
</p>
</div>

效果如图：

有趣的是，您可以将这两个伪类组合在一起，创建一个 :only-child 的版本。以下两个规则将选择相同的元素：
p:only-child {color: red;}
p:first-child:last-child {background-color: red;}

选择同一类型的第一个和最后一个

类似于选择元素的第一个和最后一个子元素，您可以在另一个元素内选择同一类型元素的第一个或最后一个。

table: first-of-type {border-top: 2px solid gray;}

请注意，这不适用于整个文档；所示规则不会选择文档中的第一个 <table> 元素并跳过所有其他元素。相反，它会选择每个包含 <table> 元素的元素中的第一个 <table> 元素，并跳过该元素之后的任何后续 <table> 元素。因此，根据图中显示的文档结构，圆圈中的节点是被选择的节点。

另一方面是 : last-of-type，它选择给定类型元素的最后一个实例，从一组兄弟元素中的最后一个元素开始，向后走到第一个元素，直到遇到该类型的实例。在图中显示的文档结构中，圆圈中的节点是通过 table: last-of-type 选择的节点。

选择每个第n个子元素

CSS有 :nth-child() 伪类。通过在括号中填写整数或基本代数表达式，您可以选择任何任意编号的子元素。

:nth-child(n)的详细用法：

1、简单数字序号写法
:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子：


li:nth-child(1)
{
  background: #ff0000;
  border-bottom: 1px;
}
li:nth-child(2)
{
  background: #ff0000;
  border-bottom: 1px;
}
...

2、奇偶匹配：奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

例子：


li:nth-child(odd)
{
  background:#ff0000;
}
li:nth-child(even)
{
  background:#0000ff;
}

3、倍数匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：


li:nth-child(2n)
{
  background: #ff0000;
  border-bottom: 1px;
}
......

4、倍数分组匹配 :nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：


li:nth-child(3n+1)
{
  background: #ff0000;
  border-bottom: 1px;
}

5、正方向范围，选中从第6个开始的子元素


li:nth-child(n+6)
{
  background: #ff0000;
  border-bottom: 1px;
}

6、反向倍数分组匹配:nth-child(-an+b)

此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。


li:nth-child(-n+9)
{
  background: #ff0000;
  border-bottom: 1px;
}

7、前后限制范围，选择第6个到第9个


li:nth-child(n+6):nth-child(-n+9)
{
  background: #ff0000;
  border-bottom: 1px;
}
......

8、范围高级用法：选中的子元素是从第2位到第9位，并且只包含奇数位。


li: nth-child(n+2):nth-child(odd):nth-child(-n+9)
{
  background: #ff0000;
  border-bottom: 1px;
}

9、最后一个元素开始计数 :nth-last-child()


li:nth-last-child(2)
{
  background: #ff0000;
  border-bottom: 1px;
}

注：n代表0、1、2、3、4和更远的无限序列。

li: only-child {width: 100%;}

li: nth-child(1): nth-last-child(2),

li: nth-child(2): nth-last-child(1) {width: 50%;}

li: nth-child(1): nth-last-child(3),li: nth-child(1): nth-last-child(3) ~ li {width: 33.33%;}

li: nth-child(1): nth-last-child(4),li: nth-child(1): nth-last-child(4) ~ li {width: 25%;}

在这些示例中，如果列表项是唯一的列表项，宽度为100%。如果列表项是第一个项目，同时也是倒数第二个项目，这意味着有两个项目，宽度为50%。如果一项是第一个项目，同时也是倒数第三个项目，我们将其和其后的两个列表项设置为33%的宽度。同样，如果列表项是第一个项目，同时也是倒数第四个项目，这意味着总共有四个项目，因此我们将其和其三个兄弟列表项设置为25%的宽度。

elt:nth-child(n)：所干的事情分为两步
1.找到elt规则要求（可能是类选择器，可能是元素选择器等）的父元素下所有的子元素。
2.在所有的子元素中找到第n个元素，如果找到的第n个元素，第n个元素是前面的elt类型或者类，符合前面elt规则要求（可能是类选择器，可能是元素选择器等）则被选中，应用相应的样式，否则不被选中，什么也不做。
3.如果是 elt :nth-child(n)，elt后面，:前面有空格(实际等价于elt *:nth-child(n))。则是寻找elt元素下的直接子元素中的第n个元素，无论第n个元素是什么类型或者类都会被选中。

个人总结：elt是要选中的元素（可能是类选择器，可能是元素选择器，组合选择器等）

nth-child(n)是要选中的元素的位置（elt元素在其父元素下的位置）

选择每一种类型的 nth 个元素

在可能已经熟悉的模式中，:nth-child() 和 :nth-last-child() 伪类在 :nth-of-type() 和 :nth-last-of-type() 中有对应。

区别：

E:nth-of-type(n) E元素的父元素的子元素中第n个E元素匹配(不一定是E元素的父元素的第n个子元素)

E:nth-child(n) E元素的父元素的第n个子元素且是E元素才匹配

位置伪类 (Location Pseudo-classes)

超链接特定伪类

表3-1. 链接伪类

名称	描述
:link	指的是任何指向未访问过的地址的超链接（即，有href属性）的锚点。
:visited	指的是任何指向已经访问过的地址的超链接的锚点。出于安全考虑，可以应用于已访问链接的样式受到严重限制；
:any-link	指的是任何可能匹配:link或:visited的元素。
:local-lin k	指的是指向与正在样式化的页面相同URL的链接。一个例子是文档内的跳转链接。注意：截至2023年初，尚未支持。

非超链接位置伪类

超链接并不是唯一与位置相关的元素。CSS还提供了一些与超链接目标相关的伪类，总结在表3-2中。

表3-2. 非链接位置伪类

名称	描述
:target	指的是id属性值与加载页面时使用的URL中的片段选择器匹配的元素，即URL专门指向的元素。
:target-within	指的是当前是URL目标的元素，或者包含了一个如此目标的元素。注意：截至2023年初，不支持此功能。
:scope	指的是作为选择器匹配参考点的元素。

:target

可以用来匹配文档(页面)的URI中某个标志符的目标元素, 通俗的说, 就是包含有 " # " 的标志符, 也可以理解为锚点，也就是说 :target 借助a标签改变页面中锚点 / 锚链接 , 实现切换的效果


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试</title> 
<style>
.tablist {
      position: relative;
      margin: 50px auto;
      min-height: 200px;
  }
  .tabmenu {
      position: absolute;
      /* 包含整个padding-box */
      top: 100%;
      margin: 0;
      padding: 1px 0 0 15px;
  }
  .tabmenu li {
      display: inline-block;
  }
  .tabmenu li a {
      text-decoration: none;
      display: block;
      padding: 5px 10px;
      margin: 0 10px 0 0;
      border: 1px solid #91a7b4;
      border-radius: 0 0 3px 3px;
      background: #e3f1f8;
      color: #333;
  }
  .tab_content {
      position: absolute;
      width: 600px;
      height: 170px;
      padding: 15px;
      border: 1px solid #91a8b4;
      border-radius: 3px;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
      font-size: 18px;
      line-height: 20px;
      color: #666;
      background: #eee;
  }
  #tab1:target,
  #tab2:target,
  #tab3:target {
      /*用了这个就有层叠了*/
      z-index:2;
  }
</style>
</head>
<body>
 
<div class="tablist">
    <ul class="tabmenu">
        <li><a href="#tab1">标签一</a></li>
        <li><a href="#tab2">标签二</a></li>
        <li><a href="#tab3">标签三</a></li>
    </ul>
    <div id="tab1" class="tab_content">this is tab1 content</div>
    <div id="tab2" class="tab_content">this is tab2 content</div>
    <div id="tab3" class="tab_content">this is tab3 content</div>
</div>
 
</body>
</html>

scope
scope 是 CSS 中的一个伪类选择器，表示当前规则所在元素，它可以用于限定元素选择器的范围。在常规的 CSS 中，所有的选择器都是全局的，即它们适用于文档中的任何元素。但在某些情况下，我们需要将某个选择器限定在特定的元素内部，这个时候可以使用 :scope。

:scope 可以用于代替当前元素的选择器，比如 div:scope 可以写成 :scope，#id:scope 可以写成 :scope#id，.class:scope 可以写成 :scope.class。这样，选择器就只会作用于当前元素内部的子元素，而不是文档中的所有元素。

举个例子，在下面的 HTML 代码中，.container 中包含了两个子元素，分别是 h1 和 p，我们可以使用 :scope 来限定 container 内部的样式。代码如下：


<div class="container">
  <h1>Hello World</h1>
  <p>这是一段文本</p>
</div>
 
<style>
  .container {
    font-size: 16px;
    
    /* 使用 :scope 限定子元素的样式 */
    :scope h1 {
      font-size: 24px;
    }
    
    :scope p {
      color: red;
    }
  }
</style>

在上述例子中，.container 的样式应用到了它的子元素上，但 h1 和 p 的样式又被限定在了 .container 内部，而不是作用于文档中的所有 h1 和 p 元素。

用户操作伪类

CSS定义了一些伪类，可以根据用户采取的操作改变文档的外观。这些动态伪类传统上用于设置超链接的样式，但其可能性要广泛得多。

伪类的描述如表3-3所示。

表3-3. 用户操作伪类

名称	描述
:hover	指的是鼠标指针放置在其上的任何元素，例如，鼠标指针悬停在超链接上
:active	指的是已被用户输入激活的任何元素，例如，在按下鼠标按钮期间用户单击的超链接，或用户通过触摸屏轻触的元素
:focus	指的是当前具有输入焦点的任何元素，即可以接受键盘输入或以某种方式激活
:focus-within	指的是当前具有输入焦点的任何元素，即可以接受键盘输入或以某种方式激活，或包含已如此聚焦的元素的元素
:focus-visible	指的是当前具有输入焦点的任何元素，但仅限于用户代理认为应具有可见焦点的元素类型

1.1 :hover
selector:hover 表示匹配鼠标经过的selector选择器元素。

应用场景：

鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等

细节优化：

如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用）
通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通过增加focus伪类来优化（使用Tab键来聚焦目标元素触发之前的hover对应的效果）
注意事项：

:hover不适用于移动端，虽然也能触发，但消失并不敏捷，体验反而奇怪。

1.2 :active
selector:active 表示匹配激活状态的selector选择器元素（通过鼠标主键点击或触屏触摸的过程中触发样式，结束后还原样式），支持任意html元素。

应用场景：

链接和按钮点击过程中的样式设置

注意事项：

（1）IE浏览器中，:active无法冒泡
（2）IE浏览器中，<html>和<body>:标签触发active样式后无法还原
（3）移动端Safari浏览器下，:active伪类默认无效，可通过touch事件代替
（4）键盘无法触发:acitve伪类样式，按Enter键会触发点击事件

1.3 :focus
selector:focus 表示匹配聚焦状态的selector选择器元素。

有效范围：

非disabled状态的表单元素（包括input，select和button元素）
含有href属性的a元素
area和summary元素
应用场景：

常用于表单元素聚焦时的边框高亮显示

注意事项：

使用:focus来修改按钮的样式时，建议按钮就用button元素，而非span或div标签模拟的按钮。因为考虑到纯键盘无鼠标的场景,button元素可以通过键盘Tab触发聚焦，而span或div元素不行

1.4 :focus-within
selector:focus-within 表示当前selector选择器元素或者其子元素聚焦时都会匹配（而focus只会匹配对应元素本身）。说明子元素聚焦可以让父元素的样式变化

应用场景：

用于表单form或列表元素中设置子表单或子元素的一些通用样式

示例：
form表单中任一表单元素聚集时让所有表单元素前面文字高亮


<form class="form">
    <label for="username">用户名：</label><input id="username" type="text"/><br>
    <label for="password">密码：</label><input id="password" type="text"/>
</form>


form:focus-within label{
        color:darkblue;
        text-shadow: 0 0 1px;
    }
</form>

1.5 :focus-visible
应用场景：

selector:focus-visible 匹配的场景是：元素聚焦，同时浏览器认为聚焦轮廓应该显示。

经典场景是一些元素(比如a元素)我们认为在点击时不应该有轮廓，而键盘访问时应该有轮廓。而此时当你遇到某个元素点击和键盘访问时都有轮廓时，你想修改成前面那样就可以用这个伪类。

换句话说:focus-visible可以判断是由键盘还是鼠标触发的聚焦行为


:focus:not(:focus-visible){
     /*这里的focus-visible可以看作匹配是键盘聚焦*/
       /*所以这里匹配不是键盘引发的聚焦行为（比如鼠标触发）*/
     outline: 0;
 }

UI状态伪类

与动态伪类密切相关的是用户界面（UI）状态伪类，如表3-4所述。这些伪类允许根据UI元素（如复选框）的当前状态进行样式设置。

表3-4。UI状态伪类

名称	描述
:enabled	指的是启用的UI元素（如表单元素）——即，可以输入
:disabled	指的是禁用的UI元素（如表单元素）——即，不能输入
:checked	指的是已选中的单选按钮或复选框，可以是用户选择，也可以是文档默认设置
:indeterminate	指的是尚未选中或未取消选中的单选按钮或复选框；这种状态只能通过DOM脚本设置，而不能通过用户输入设置
:default	指的是默认选中的单选按钮、复选框或选项
:autofill	指的是浏览器自动填充的用户输入
:placeholder-shown	指的是用户输入框中显示了占位符（而不是值）文本
:valid	指的是满足所有数据有效性要求的用户输入
:invalid	指的是不满足所有数据有效性要求的用户输入
:in-range	指的是用户输入值在最小值和最大值之间
:out-of-range	指的是用户输入值低于最小值或高于最大值
:required	指的是必须设置值的用户输入
:optional	指的是不需要设置值的用户输入
:read-write	指的是用户可以编辑的输入框
:read-only	指的是用户不能编辑的输入框

虽然UI元素的状态肯定可以通过用户操作进行更改——例如，用户选中或取消选中复选框——但UI状态伪类不被归类为纯粹动态的，因为它们也可能受到文档结构或脚本的影响。

:lang() 和 :dir() 伪类

当您想要根据元素的语言选择元素时，可以使用 :lang() 伪类。在匹配模式方面，这个伪类类似于 |= 属性选择器（请参阅“基于部分属性值的选择”）。例如，要将法语内容的元素斜体，您可以编写以下任一规则：

*: lang(fr) {font-style: italic;}

*[lang| ="fr"] {font-style: italic;}

CSS还有一种名为:dir()的伪类，它基于HTML元素的方向选择元素。因此，例如，您可以像这样选择所有方向为从右到左的元素：

*:dir(rtl) {border-right: 2px solid;}

需要注意的是，:dir()伪类根据HTML中元素的方向选择元素，而不是CSS中可能应用给它们的方向属性值。因此，您只能使用ltr（从左到右）和rtl（从右到左）这两个值进行选择，因为HTML仅支持这些方向值。

逻辑伪类

否定伪类

CSS提供了否定伪类：:not()。:not()的工作方式是，你将它附加到一个选择器上，然后在括号中填写一个选择器或一组选择器，描述原始选择器不能匹配的内容。

警告

在仅2021年初，浏览器才开始支持在:not()中使用复杂选择器，因此在使用它时要谨慎，尤其是在传统环境中。

选择所有具有moreinfo类的元素，但不是列表项。

.moreinfo:not(li) {font-style: italic;}

您不能做的是嵌套否定伪类；因此，p: not(: not(p)) 不是有效的，会被忽略。

需要注意的一个问题是，当某些情况下规则会以意想不到的方式组合时，主要是因为我们不习惯从否定的角度考虑选择。考虑以下测试用例：

div:not(.one) p {font-weight: normal;}

div.one p {font-weight: bold;}

<p>我是一个段落！</p>

</div>

在这个例子中，第一个规则将应用于所有不属于类“one”的 div 元素中的 p 元素，而第二个规则将应用于类为“one”的 div 元素中的 p 元素。然而，由于第一个规则的优先级低于第二个规则，因此类为“one”的 div 元素中的 p 元素将继承第二个规则，而不是第一个规则。这是一个意想不到的结果，所以在使用否定选择器时要小心。

:is() 和 :where()

CSS 有两个伪类可以实现复杂选择器内的分组匹配，即 :is() 和 :where() 。它们的用法几乎相同，只有一点小差异，等你了解它们的工作原理后我们会讲解。先从 :is() 开始。

假设你想选择所有的列表项，无论它们属于有序列表还是无序列表。传统的做法如下所示：

ol li, ul li {font-style: italic;}

使用 :is() ，我们可以改写成这样：

:is(ol, ul) li {font-style: italic;}

匹配的元素将完全相同：所有属于有序列表或无序列表的列表项。

警告：
:is() 和 :where() 在 2021 年初才引入浏览器，因此在使用它们时要谨慎，尤其是在 legacy 设置中。

选择已定义的元素

:defined

随着网络的发展，它增加了越来越多的功能。其中较新的一项功能是将自定义 HTML 元素以标准化的方式添加到标记中。这在模式库中经常发生，它们通常根据库中特定的元素定义 Web 组件。

为了提高效率，这类库会推迟定义元素，直到需要或准备好用预期的内容填充。这样的自定义元素在标记中可能如下所示：

<mylib-combobox>options go here</mylib-combobox>

实际目标是用后端 CMS 提供的选项填充这个组合框（一个允许用户输入任意值的下拉列表），通过一个请求最新数据的脚本下载数据，以便在本地构建列表，并在此过程中删除占位符文本。

然而，如果服务器无法响应，导致自定义元素未定义且保留占位符文本，会发生什么？如果没有采取措施，文本“options go here” 将被插入到页面中，可能只有一些基本样式。

这就是 :defined 的作用。您可以使用它来选择任何已定义的元素，并将其与 :not() 结合使用，以选择尚未定义的元素。以下是一种简单的方法，用于隐藏未定义的组合框，并为已定义的组合框应用样式：

mylib-combobox: not(: defined) {display: none;}

mylib-combobox: defined {display: inline-block;}

mylib-combobox {font-size: inherit; border: 1px solid gray; outline: 1px solid silver;}

:has()伪类

:has()伪类有点棘手，因为它并不完全遵循我们直到现在一直在使用的规则（:has()伪类在某种意义上是传说中的“父选择器”），但因此，它也具有惊人的强大功能。

其他伪类

名称描述

:nth-col()

引用表格单元格或网格项目的第n列，使用an + b模式找到；与:nth-child()基本相同，但专门引用表格或网格列

:nth-last-col()

引用表格单元格或网格项目的第n列，使用an + b模式找到；与:nth-last-child()基本相同，但专门引用表格或网格列

:left

引用印刷文档中的左页；有关更多信息，请参阅第21章

:right

引用印刷文档中的右页；有关更多信息，请参阅第21章

:fullscreen

引用正在全屏显示的元素（例如，全屏模式下的视频）

:past

引用出现在（时间上）匹配:current元素之前的元素

:current

引用当前正在显示的元素，或当前正在显示的时间格式元素（例如，包含闭路字幕文本的元素）的祖先元素

:future

引用出现在（时间上）匹配:current元素之后的元素

:paused

引用可以具有“播放”或“暂停”状态（例如，音频、视频等）的任何元素，当它处于“暂停”状态时

:playing

引用可以具有“播放”或“暂停”状态（例如，音频、视频等）的任何元素，当它处于“播放”状态时

:picture-i

n-picture

引用用作画中画显示的元素

伪元素选择器

伪元素选择器是CSS中的一种选择器，用于向指定元素的某个部分应用样式，而不必添加额外的HTML元素。

selector::pseudo-element {
/* styles */
}
其中，selector是要选择的元素，pseudo-element是伪元素名称，可以是上述任何一个。

::before
在元素的内容前插入一个生成的内容。

/* 在p元素的内容前插入一个黑色圆点 */
p::before {
content: "\2022";
color: black;
}
::after
在元素的内容后插入一个生成的内容。

/* 在h2元素的内容后插入一张图标 */
h2::after {
content: url(icon.png);
}
::first-letter
选择元素的第一个字母。

/* 选中第一个p元素的第一个字母 */
p:first-of-type::first-letter {
font-size: 2em;
}
::first-line
选择元素的第一行文本。

/* 选择第一行文本 */
p::first-line {
font-weight: bold;
}
::selection
选择用户选择的文本部分。

/* 高亮选择的文本 */
::selection {
background-color: yellow;
}

::backdrop 伪元素

::backdrop 伪元素与全屏 API 结合使用，以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式。

例子：

video::backdrop {  background-color: gray;}

在上面的代码中，当一个视频元素处于全屏模式时，它后面的背景将有一个灰色的背景色。

::cue 伪元素

::cue 伪元素以 <audio> 或 <video> 元素的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素，您可以将样式专门应用于提示文本。

例子：

video::cue {
color: white;
background-color: black;
}
在上面的代码中，视频元素中的提示文本将具有白色文本颜色和黑色背景。

需要注意的是，伪元素选择器仅适用于某些元素，例如块级元素、列表项、表格单元格等。此外，伪元素选择器中也不能使用动态伪类选择器（如:hover、:active等）。

阴影伪类和元素

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/1014371

CSS：权威指南读书笔记 第三章：伪类和伪元素选择器_css权威指南

伪类选择器

组合伪类

结构伪类

选择根元素

选择空元素

选择唯一子元素

选择元素的特定类型并唯一的子元素

选择第一个子元素

选择最后一个子元素

选择同一类型的第一个和最后一个

选择每个第n个子元素

选择每一种类型的 nth 个元素

位置伪类 (Location Pseudo-classes)

超链接特定伪类

非超链接位置伪类

用户操作伪类

UI状态伪类

:lang() 和 :dir() 伪类

逻辑伪类

否定伪类

:is() 和 :where()

选择已定义的元素

:has()伪类

其他伪类

伪元素选择器

阴影伪类和元素

CSS：权威指南读书笔记第三章：伪类和伪元素选择器_css权威指南