목차
Pseudo-class selector
:link 和:visited 选择器
:hover 选择器
:active 选择器
:focus 选择器
🎜: 링크 및: 방문 선택기 🎜
🎜: 호버 선택기 🎜
🎜: 활성 선택기 🎜
🎜: 포커스 선택기 🎜
狐妖小红娘
웹 프론트엔드 CSS 튜토리얼 CSS 의사 선택기 학습 의사 클래스 선택기 분석

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

Aug 03, 2022 am 11:26 AM
css 의사 요소 선택자 의사 클래스

이전 글 "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가지 유형으로 나눌 수 있습니다.

    <li>

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

    <li>

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

    <li>

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

    <li>

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

    <li>

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

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

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

: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 id="狐妖小红娘">狐妖小红娘</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伪类为例来说明:

    <li>

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

    <li>

    :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种情况:

    <li>

    数字值:任意一个大于 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)公式用法,如下示例列举了一些公式用法:

    <li>

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

    <li>

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

    <li>

    :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、输入伪类选择器

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

    <li>

    :enabled:disabled

    <li>

    :read-only:read-write

    <li>

    :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()否定的伪类

    <li>

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

    <li>

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

    <li>

    不可出现多个表达式,也不支持选择符;
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 자리 표시자는 무엇을 의미합니까? vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다.

js에서 스팬은 무엇을 의미하나요? js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다.

js에서 rem은 무엇을 의미합니까? js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

CSS의 REM은 루트 요소(html)의 글꼴 크기에 상대적인 단위입니다. 여기에는 다음과 같은 특징이 있습니다. 루트 요소의 글꼴 크기를 기준으로 하며 상위 요소의 영향을 받지 않습니다. 루트 요소의 글꼴 크기가 변경되면 REM을 사용하는 요소가 그에 따라 조정됩니다. 모든 CSS 속성과 함께 사용할 수 있습니다. REM 사용의 장점은 다음과 같습니다. 반응성: 다양한 장치 및 화면 크기에서 텍스트를 읽을 수 있도록 유지합니다. 일관성: 웹사이트 전체에서 글꼴 크기가 일관되게 유지되어야 합니다. 확장성: 루트 요소 글꼴 크기를 조정하여 전역 글꼴 크기를 쉽게 변경할 수 있습니다.

Vue에 이미지를 삽입하는 방법 Vue에 이미지를 삽입하는 방법 May 02, 2024 pm 10:48 PM

Vue에 이미지를 도입하는 방법에는 URL, 필수 함수, 정적 파일, v-bind 지시어 및 CSS 배경 이미지 등 5가지 방법이 있습니다. 동적 이미지는 Vue의 계산된 속성이나 리스너에서 처리할 수 있으며, 번들 도구를 사용하여 이미지 로딩을 최적화할 수 있습니다. 경로가 올바른지 확인하세요. 그렇지 않으면 로딩 오류가 나타납니다.

스팬 태그의 기능은 무엇입니까 스팬 태그의 기능은 무엇입니까 Apr 30, 2024 pm 01:54 PM

SPAN 태그는 스타일, 색상, 글꼴 크기 등의 속성을 적용하여 텍스트를 강조 표시하는 데 사용되는 인라인 HTML 태그입니다. 여기에는 텍스트 강조, 텍스트 그룹화, 호버 효과 추가 및 동적인 콘텐츠 업데이트가 포함됩니다. 강조하려는 텍스트 주위에 <span>, </span> 태그를 배치하여 사용하며, CSS 스타일링이나 JavaScript를 통해 조작됩니다. SPAN 태그의 이점에는 의미의 명확성, 스타일 유연성 및 유지 관리 용이성이 포함됩니다.

js에서 프롬프트를 래핑하는 방법 js에서 프롬프트를 래핑하는 방법 May 01, 2024 am 06:24 AM

JavaScript에서 프롬프트() 메서드를 사용할 때 다음 세 가지 방법을 통해 줄 바꿈을 수행할 수 있습니다. 1. 줄을 끊으려는 위치에 "\n" 문자를 삽입합니다. 2. 줄 바꿈 문자를 사용합니다. 프롬프트 텍스트; 3. CSS의 "white" -space: pre" 스타일을 사용하여 줄바꿈을 강제합니다.

브라우저 플러그인은 어떤 언어로 작성되어 있나요? 브라우저 플러그인은 어떤 언어로 작성되어 있나요? May 08, 2024 pm 09:36 PM

브라우저 플러그인은 일반적으로 다음 언어로 작성됩니다. 프런트엔드 언어: JavaScript, HTML, CSS 백엔드 언어: C++, Rust, WebAssembly 기타 언어: Python, Java

js의 노드 란 무엇입니까? js의 노드 란 무엇입니까? May 07, 2024 pm 09:06 PM

노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다.

See all articles