CSS 의사 선택기 학습 의사 클래스 선택기 분석-CSS 튜토리얼-php.cn

이전 글 "css 의사 선택자 학습: 의사 요소 선택자 분석"에서 의사 요소 선택자에 대해 알아보았는데, 오늘은 의사 클래스 선택자에 대해 자세히 살펴보는 것이 모든 분들께 도움이 되기를 바랍니다. !

CSS 의사 선택기 학습 의사 클래스 선택기 분석

Pseudo-class selector

Pseudo-class selector는 HTML 요소에 포함되지 않은 상태 정보를 통해 HTML 요소를 찾을 수 있게 해주는 사용법입니다. 의사 클래스 선택기의 구체적인 사용법은 기존 선택기에 키워드를 추가하여 위치가 지정된 HTML 요소의 상태 정보를 나타내는 것입니다. [추천 학습: css 동영상 튜토리얼]

pseudo-class를 통해 개발자는 호버(hover), 클릭(active), 문서 내 다른 선택기로 선택할 수 없는 요소 등의 동적 상태를 설정할 수 있습니다. (이러한 요소에는 ID 또는 클래스 속성이 없음)(예: 첫 번째 하위 또는 마지막 하위).

예를 들어 :hover 의사 클래스 선택기를 사용하면 사용자가 버튼 위로 마우스를 가져갈 때 버튼 색상을 변경할 수 있습니다. 다음 샘플 코드에 표시된 대로: :hover伪类选择器可以用来在用户将鼠标悬停在按钮上时改变按钮的颜色。如下示例代码所示：

/* 所有用户指针悬停的按钮 */  
 button:hover {  
  color: blue;  
 }

로그인 후 복사

伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：

选择器:伪类 {  
  属性 : 属性值;  
 }

로그인 후 복사

伪类选择器 的具体语法格式为 :伪类，这里一定不要忘记 :

로그인 후 복사

<li>涂山红红 <li>涂山苏苏 <li>涂山蓉蓉 <li>涂山雅雅 의사 클래스의 이름은 대소문자를 구분하지 않지만 콜론 :으로 시작해야 합니다. 또한 의사 클래스는 CSS의 선택기와 함께 사용해야 합니다. 구문 형식은 다음과 같습니다.

li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

로그인 후 복사

🎜가상 클래스 선택기🎜의 구체적인 구문 형식은 :pseudo-class입니다. . 여기 :를 잊지 마세요. 🎜🎜 CSS에는 다음 표와 같이 다양한 의사 클래스가 제공됩니다. 🎜 :enabled:first-child :first-of-typeinput:focusa:hoverinput:in-rangeinput:invalidp:lang(it)p :last-childp:last-of-typea:link:not (p)p:nth-child(2)의 두 번째 하위 요소와 일치합니다. p:nth-last-child(2)p:nth-last-of-type (2)의 두 번째 하위 요소와 일치합니다. p:nth-of-type(2)p:only-of-typep:only -childinput:ionalinput:out-of-rangeinput:read-onlyinput:read-writeinput:requiredroot#news:target현재 활성화된 #news 요소와 일치합니다(해당 앵커 이름이 포함된 URL을 클릭하세요):validinput:valid 유효한 값을 가진 모든 <input> 요소와 일치합니다:visiteda:visited방문한 모든 링크와 일치

의사 클래스 선택자 분류

CSS 버전은 첫 번째 버전에서 세 번째 버전으로 발전했으며, 제공되는 의사 클래스 선택자의 수는 이미 엄청납니다. 특히 CSS3 버전에는 수많은 의사 클래스 선택기가 추가되었습니다.

의사 클래스 선택자가 너무 많습니다. 의사 클래스 선택자를 더 잘 분류하기 위해 용도에 따라 다음 5가지 유형으로 나눌 수 있습니다.

사용자 행동 의사 클래스: 사용자를 나타냅니다. :hover 가리키기, :active 누르기, :focus 포커스 가져오기 등과 같은 일부 동작 관련 의사 클래스입니다. :hover、按下:active以及获取焦点:focus等。

URL定位伪类：用于定位HTML页面中的元素

输入伪类：与表单控件相关的伪类

结构伪类：主要用于定位目标元素

逻辑组合伪类：用于逻辑操作的，例如:not()，就表示不是某元素。

1、用户行为伪类--动态伪类选择器

之所以称为动态伪类选择器，是因为它们根据条件的改变匹配元素，是相对于文档的固定状态来说的。随着JavaScript广泛用于修改文档内容和元素状态，动态选择器和静态选择器之间的界限越来越模糊，不过，动态伪类选择器仍然是一类比较特别的选择器。

：link 和：visited 选择器

：link选择器匹配超链接，：visited选择器匹配用户已经访问过得超链接。

使用：visited选择器可以应用到链接元素的属性不多。你可以改变颜色和字体，不过仅此而已。

提示：：visited选择器匹配用户在所有页面访问过的href属性为URL的任意链接，而不只是你的页面。：visited最常见的用法就是针对已访问的链接应用某种样式，从而让它们跟未访问的链接有所区别。比如我们看新闻，看过的新闻和没有看过的新闻在首页列表呈现的状态是不一样的，便于我们区分。

：hover 选择器

：hover选择器匹配用户鼠标悬停在其上的任意元素。

：active 选择器

：active选择器匹配当前被用户激活的元素（一般情况下为鼠标点击该元素）。

：focus 选择器

：focus选择器匹配获得焦点的元素，常用于 input 元素。

2、结构性伪类选择器

使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（：），例如：empty。他们可以单独使用，也可以跟其他选择器组合使用，如p：empty。

结构伪类选择器类选择器包含的内容如下表所示：

Selector	Example	예제 설명
:active	a:active	clicked link
:checked	input:checked	요소와 일치
:disabled	input:disabled	는 비활성화된 모든 <input> 요소와 일치합니다.
:empty	p:empty	는 하위 요소가 없는 모든
input:enabled	는 활성화된 모든 <input> 요소와 일치합니다.
p:first-child	는 상위 하위 요소 의 첫 번째 요소와 일치합니다. 는 상위 요소의 첫 번째 하위 요소여야 합니다.
p:first-of-type	은 상위 요소 A 의 첫 번째 하위 요소와 일치합니다.	:focus
는 포커스가 있는 <input> 요소와 일치합니다.		:hover
는 마우스가 가리키고 있는 요소와 일치합니다.		:in-range
지정된 값 범위의 <input> 요소와 일치		:invalid
요소와 일치		:lang(언어)
lang 속성 값이 "it"로 시작하는 모든 요소와 일치합니다.		:last-child
은 마지막 하위 요소 는 상위 요소의 마지막 하위 요소여야 합니다		:last-of-type
은 마지막 상위 요소에서		:link
는 방문하지 않은 모든 링크와 일치합니다		:not(selector)
element		:nth-child(n)
는 상위		:nth-last-child(n)
상위 요소의 끝에서 두 번째 하위 요소와 일치		:nth-last -of-type(n)
상위 요소		:nth-of-type(n)
은 다음의 두 번째 하위 요소와 일치합니다. 상위 요소		:only-of-type
은 상위 요소와 일치합니다. only 요소		:only-child
는 상위 요소의 유일한 하위 요소와 일치합니다		:선택적
은 "필수" 속성이 없는 <input> 요소와 일치합니다		:out-of- range
<input> 요소를 지정된 범위 밖의 값과 일치합니다		:read-only
<input> 지정된 "readonly" 속성		:read-write
은 "readonly" 속성과 일치하지 않습니다. <input> 요소		:required
는 다음과 일치합니다. <input> 요소		:root
HTML에서 "required" 속성이 지정된 요소의 루트 요소와 일치합니다.

URL 위치 지정 의사 클래스: HTML 페이지에서 요소를 찾는 데 사용됨

伪类选择器	作用
`selector:first-child`	用来定位一组兄弟元素中的第一个元素
`selector:last-child`	用来定位一组兄弟元素中的最后一个元素
`selector:nth-child(n)`	用来定位一组兄弟元素中的第n个元素
`selector:nth-last-child(n)`	用来定位一组兄弟元素中倒序方式的第n个元素
`selector:first-of-type`	用来定位一组同类型的兄弟元素中的第一个元素
`selector:last-of-type`	用来定位一组同类型的兄弟元素中的最后一个元素
`selector:nth-of-type(n)`	用来定位一组同类型的兄弟元素中的第n个元素
`selector:nth-last-of-type(n)`	用来定位一组同类型的兄弟元素中倒序方式的第n个元素
`selector:only-child`	用来定位一个没有任何兄弟元素的元素
`selector:only-of-type`	用来定位一个没有任何同类型兄弟元素的元素
`selector:empty`	用来定位一个没有子级元素的元素，并且该元素也没有任何文本内容
`selector:root`	用来定位 HTML 页面中的根元素（

🎜입력 의사 클래스: 양식 컨트롤과 관련된 의사 클래스🎜🎜🎜구조 의사 클래스 : main 대상 요소를 찾는 데 사용됩니다🎜🎜🎜논리적 조합 의사 클래스: :not()와 같은 논리적 연산에 사용되며 이는 특정 요소가 아님을 의미합니다. 🎜🎜🎜🎜1. 사용자 행동 의사 클래스 - 동적 의사 클래스 선택자🎜🎜🎜🎜동적 의사 클래스 선택자라고 불리는 이유는 조건의 변화에 따라 요소를 일치시키기 때문입니다. . 문서의 고정 상태를 기준으로 합니다. JavaScript가 문서 내용과 요소 상태를 수정하는 데 널리 사용됨에 따라 동적 선택기와 정적 선택기 사이의 경계가 점점 모호해지고 있습니다. 그러나 동적 의사 클래스 선택기는 여전히 특별한 유형의 선택기입니다. 🎜

🎜: 링크 및: 방문 선택기 🎜

🎜: 링크 선택기는 하이퍼링크와 일치하고 :visited 선택기는 사용자가 방문한 하이퍼링크와 일치합니다. 🎜🎜: 방문 선택기 사용 링크 요소에 적용할 수 있는 속성이 많지 않습니다. 색상과 글꼴을 변경할 수 있지만 그게 전부입니다. 🎜

🎜팁: 방문 선택기는 href 속성이 귀하의 페이지뿐만 아니라 모든 페이지에서 사용자가 방문한 URL인 URL의 모든 링크와 일치합니다. :visited의 가장 일반적인 용도는 방문한 링크에 특정 스타일을 적용하여 방문하지 않은 링크와 구별하는 것입니다. 예를 들어, 우리가 뉴스를 볼 때, 홈페이지 목록에서 읽은 뉴스와 읽지 않은 뉴스의 상태가 다르기 때문에 쉽게 구별할 수 있습니다. 🎜

🎜: 호버 선택기 🎜

🎜: 호버 선택기는 사용자가 마우스를 올려놓은 모든 요소와 일치합니다. 🎜

🎜: 활성 선택기 🎜

🎜: 활성 선택기는 사용자가 현재 활성화한 요소와 일치합니다(일반적으로 해당 요소는 마우스로 클릭됩니다). 🎜

🎜: 포커스 선택기 🎜

🎜: 포커스 선택기는 포커스를 받은 요소와 일치하며 입력 요소에 자주 사용됩니다. 🎜🎜🎜🎜2. 구조적 의사 클래스 선택기🎜🎜🎜🎜문서에서의 위치에 따라 요소를 선택하려면 구조적 의사 클래스 선택기를 사용하세요. 이 유형의 선택기 앞에는 콜론 문자(:)가 붙습니다(예: 비어 있음). 단독으로 사용하거나 p:empty와 같은 다른 선택기와 함께 사용할 수 있습니다. 🎜🎜구조 의사 클래스 선택기 클래스 선택기의 내용은 다음 표에 표시됩니다. 🎜
🎜🎜selector:nth-last-child(n)🎜

의사 클래스 선택기 함수

선택기:first-child🎜<td>형제 요소 그룹에서 첫 번째 요소를 찾는 데 사용됩니다.🎜🎜</td> <tr> <td> <code>selector:last-child🎜 형제 요소 그룹에서 첫 번째 요소를 찾는 데 사용됩니다. 형제 요소 그룹 🎜🎜

selector:nth-child(n)🎜 의 마지막 요소는 형제 요소 그룹에서 n번째 요소를 찾는 데 사용됩니다🎜 🎜

형제 요소 그룹에서 n번째 요소를 역순으로 찾는 데 사용됩니다🎜🎜

selector:first-of-type🎜 동일한 유형의 형제 요소 그룹에서 첫 번째 요소를 찾는 데 사용됩니다🎜🎜

selector:last- 유형 code>🎜<td>동일한 유형의 형제 요소 그룹에서 마지막 요소를 찾는 데 사용됩니다🎜🎜</td> <tr><td><code>selector:nth-of-type(n) code>🎜<td> 동일한 유형의 형제 요소 그룹에서 n번째 요소를 찾는 데 사용됩니다🎜🎜</td> <tr> <td> <code>selector:nth-last-of-type(n)🎜 동일한 유형의 형제 요소 그룹에서 n번째 요소를 역순으로 찾는 데 사용됩니다🎜🎜

selector:only-child🎜 를 사용하여 찾습니다. 형제 요소가 없는 요소🎜 🎜

selector:only-of-type🎜 동일한 유형의 형제 요소가 없는 요소를 찾는 데 사용됩니다🎜🎜

선택기: 비어 있음🎜 는 하위 요소가 없고 요소에 텍스트 콘텐츠가 없는 요소를 찾는 데 사용됩니다🎜🎜

selector:root🎜

HTML 페이지에서 루트 요소를 찾는 데 사용됩니다()🎜🎜🎜🎜

CSS中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。

:first-child与:last-child

:first-child伪类用来定义一组兄弟元素的第一个元素而:last-child伪类则是定位一组兄弟元素的最后一个元素。

如下示例代码展示了:first-child伪类和:last-child伪类的用法：

HTML结构如下：

로그인 후 복사

<li>涂山红红 <li>涂山苏苏 <li>涂山蓉蓉 <li>涂山雅雅

CSS代码如下：

li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

로그인 후 복사

代码运行结果如下图所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

:first-child 伪类可以使用:nth-child(n)伪类改写为:nth-child(1)，而:last-child伪类可以使用:nth-last-child(n)伪类改写为:nth-last-child(1)。

:first-child伪类和:last-child伪类经常会引起误解。例如 li:first-child 是用来定位所有<li>元素中第一个作为子级元素的，而不是定位<li>元素的第一个子级元素。

:first-of-type与:last-of-type

:first-of-type伪类和:last-of-type伪类一个用于定位一组元素中的第一个兄弟元素，一个用来定位最后一个。

如下示例代码展示了:first-of-type伪类和:last-of-type伪类的用法：

HTML结构如下：

<h3>狐妖小红娘</h3>
<p>涂山红红</p>
<p>涂山苏苏</p>

로그인 후 복사

CSS代码如下：

p:first-of-type {
    color: red;
}

p:last-of-type {
    color: blue;
}

로그인 후 복사

代码运行结果如下图所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

:first-of-type伪类与:last-of-type伪类的用法一定要和:first-child伪类与:last-child伪类的用法区分开。以:first-of-type伪类和:first-child伪类为例来说明：

:first-of-type伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何。

:first-child伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。

如果将上述示例代码中的:first-of-type伪类改写为:first-child伪类的话，将不会生效。

:nth-child(n)与:nth-last-child(n)

:nth-child(n)伪类和:nth-last-child(n)伪类都是CSS3中新增的选择器，这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n)伪类是倒序方式定位元素，也就是说，:nth-last-child(n)伪类是从一组元素的结尾开始的。

接下来，主要以:nth-child(n)伪类为例进行讲解。:nth-child(n)伪类中的n参数的含义具有3种情况：

数字值：任意一个大于 0 的正整数。例如 #example td:nth-child(1) 表示定位ID为example的父元素下所有

元素中的第一个元素。<li>

关键字：odd表示奇数，等同于:nth-child(2n)；even表示偶数，等同于:nth-child(2n+1)。

<li>

格式为(an+b)公式：a表示周期的长度（步长），n表示计数器（从 0 开始 ），而b则表示偏移值。

如下示例代码展示了:nth-child(n)伪类(实现表格隔行换色效果)的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>nth-child伪类</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }

        th,
        td {
            border-top: 1px solid lightcoral;
            text-align: center;
        }

        /* 最后一行单元格在底部增加一个边框效果 */
        tr:last-child td {
            border-bottom: 1px solid lightcoral;
        }

        /* 实现隔行换色 */
        tr:nth-child(even) {
            background-color: aquamarine;
        }
    </style>

로그인 후 복사

姓名	区域
梵云飞	西西域
欢都落兰	南国
石宽	北山
涂山红红	涂山

代码运行结果如下图所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

:nth-child(n)伪类的n参数用法中比较复杂的是使用(an+b)公式用法，如下示例列举了一些公式用法：

:nth-child(5n)：定位元素的序号是5 [=5×1]、10 [=5×2]、15 [=5×3]等。

:nth-child(3n+4)：定位元素的序号是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。

:nth-child(-n+3)：定位元素的序号是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。

:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别，类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白。但是HTML的注释是不影响:empty伪类定位元素的。

如下示例代码展示了:empty伪类的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>empty伪类</title>
    <style>
        body {
            /* 开启flex布局 */
            display: flex;
        }

        .box {
            background: pink;
            height: 80px;
            width: 80px;
            margin: 0 20px;
        }

        .box:empty {
            background: lime;
        }
    </style>



    <div></div>
    <div>这个元素的背景是粉色的</div>
    <div>
        <!-- 这是一个注释 -->
    </div>

로그인 후 복사

代码运行结果如下图所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

:root

CSS中的:root伪类选择器比较简单，它代表的就是元素。

如下代码展示的:root伪类的用法：

:root {
    height: 100vh;
    width: 100vw;
    background-color: dodgerblue;
}

로그인 후 복사

代码运行结果如下图所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

3、UI元素状态伪类选择器

使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：

选择器	说明
：enabled	选择启用状态的元素
：disabled	选择禁用状态的元素
：checked	选择被选中的input元素（只用于单选按钮和复选框）
：default	选择默认元素
：valid	根据输入验证选择有效或者无效的input元素
：in-range/：out-of-range	选择在制定范围之内或者职位受限的input元素
：required/：optional	根据是否允许：required属性选择input元素

4、输入伪类选择器

关于表单输入的伪类，主要介绍三种常用的，具体如下：

:enabled和:disabled

:read-only和:read-write

:checked

:enabled和:disabled

:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用状态，这组为了使完全对立的。

:enabled伪类的实际用处并不大，因为大多元素默认都是可用的，所以写不写意义并不大。

如下代码展示了:enabled和:disabled的用法：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>:enabled和:disabled的用法</title>
  <style>
    input:enabled {
      outline: none;
    }

    input:disabled {
      /* 禁用状态背景为灰色 */
      background-color: gray;
    }
  </style>



  <input>
  <input>

로그인 후 복사

代码运行结果如下所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

由上图我们看到禁用状态的<input>的背景颜色为灰色。

:read-only和:read-write

:read-only和:read-write一这组伪类选择器分别表示只读和可写状态，同样的:read-write也很鸡肋，因为默认就是可读写，示例代码如下所示：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>:read-only和:read-write</title>
  <style>
    input:read-write {
      outline: none;
    }

    /* 只读状态 */
    input:read-only {
      color: red;
      outline: none;
    }
  </style>



  <input>
  <input>

로그인 후 복사

代码运行结果如下所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

我们可以看到，只读的<input>的文字颜色为红色。

:checked

:checked伪类可以说是众多伪类选择器中使用频率很高的一个伪类选择器，该选择器表示选中的状态，就比如下面这个例子：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>checked伪类</title>
  <style>
    input:checked {
      /* 为选中的增加阴影 */
      box-shadow: 2px 2px 2px 2px lightcoral;
    }
  </style>



  <input>
  <input>

로그인 후 복사

CSS 의사 선택기 학습 의사 클래스 선택기 분석

关于:checked伪类，最佳实践是配合<label></label>元素来实现，现在我们就通过:checked和<label></label>元素来实现一个开关的效果。

示例代码如下：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>开关</title>
  <style>
    [type="checkbox"] {
      width: 44px;
      height: 26px;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* 开关样式 */
    .cs-switch {
      display: inline-block;
      width: 44px;
      height: 26px;
      border: 2px solid;
      border-radius: 26px;
      background-color: currentColor;
      box-sizing: border-box;
      color: silver;
      transition: all .2s;
      cursor: pointer;
    }

    .cs-switch::before {
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fff;
      transition: margin-left .2s;
    }


    :checked+.cs-switch {
      color: blueviolet;
    }

    /* 选中移动 */
    :checked+.cs-switch::before {
      margin-left: 18px;
    }

    /* 禁用状态 */
    :disabled+.cs-switch {
      opacity: .4;
      cursor: not-allowed;
    }
  </style>



  <!-- 普通状态 -->
  <input>
  <label></label>
  <!-- 选中状态 -->
  <input>
  <label></label>
  <!-- 禁用状态 -->
  <input>
  <label></label>
  <!-- 选中禁用状态 -->
  <input>
  <label></label>

로그인 후 복사

运行效果如下所示：

CSS 의사 선택기 학습 의사 클래스 선택기 분석

5、逻辑组合伪类

:not()否定的伪类

优先级为0，优先级由括号中的表达式决定； :not(p)由p决定

可以不断的级联；
input:not(:disabled):not(:read-only) {} ;表示处于不禁用，也不处于只读的状态

不可出现多个表达式，也不支持选择符；
li:not(li, od); 尚未支持

:not()的巨大的用处在于告别重置的问题；

重置web中的样式，就好比我们在项目中经常使用到的：添加.active类名来控制样式的显示与隐藏/改变样式，往常的写法都是：

.cs_li {
	display: none;
}
.cs_li.active {
	display: block;
}

로그인 후 복사

而我们可以使用:not()伪类，可以更好的实现：

.cs_li:not(.active) {
	display: none;
}

로그인 후 복사

在列表中的设置<li>的边框时也可使用其:not()

.cs_li:not(:nth-of-type(5n)){
	margin-right: 10px; // 除5的倍数项都设置右边的外边距
}

로그인 후 복사

:is()的作用是简化选择器

平时我们开发中经常会用到类似下面的语法：

.cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
	display: none;
}

로그인 후 복사

使用:is()简化可写成：

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
	display: none;
}

로그인 후 복사

还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示

ol ol li,
ol ul li, 
ul ul li,
ul ol li {
	margin-left: 20px;
}

로그인 후 복사

使用:is()伪类强化，则只需要几行代码：

:is(ol, ul) :is(ol, ul) li{
	margin-left: 20px;
}

로그인 후 복사

<strong>:where()</strong>

:where()与上方的:is()相同，唯一不同的是级别永远为0，也不受括号里面的表达式影响；

使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于.conten选择器

:where(.article, section) .conten {}
:where(#article, #section) .conten {

로그인 후 복사

（学习视频分享：web前端入门）

위 내용은 CSS 의사 선택기 학습 의사 클래스 선택기 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!