CSS 선택기에 대한 자세한 소개-CSS 튜토리얼-php.cn

이 글에서는 주로 CSS 스터디 노트에서 CSS Selector 관련 정보를 소개하고 있습니다. 필요한 친구들은

CSS1

Type selector

에 정의된 선택자를 참고하면 됩니다. 요소(실제로는 html tag selector), 일반적인 사용법은 다음과 같습니다:

body {
    /*对 body 元素定义样式*/
}

body,p {
    /*同时选择多种标签元素*/
}

로그인 후 복사

ID selector

는 지정된 ID를 가진 html 요소를 선택하는 데 사용되며, 일반적인 사용법은 다음과 같습니다:

<p id="nav">
    
</p>

<style>
    #nav {
        /*定义 ID 为 nav 的元素的样式*/
    }
</style>

로그인 후 복사

CSS의 렌더링 순서 때문에 오른쪽에서 왼쪽으로 렌더링되며 ID는 완전히 고유하므로 이전 유형 선택기를 생략할 수 있습니다.

클래스 선택기

는 지정된 클래스 이름을 가진 html 요소를 선택하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

<p class="nav">
    
</p>

<style>
    .nav {
        /*定义 class 为 nav 的元素的样式*/
    }
</style>

로그인 후 복사

에는 계층적으로 중첩된 요소를 선택하는 데 사용되는 선택기

가 포함됩니다.

<p class="nav">
    <p class="nav-tools">
        
    </p>
</p>

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>

<style>
    .nav .nav-tools {
        /*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
    }
</style>

로그인 후 복사

후속 선택자가 이전 요소에 포함되어 있는 한 포함 선택자는 계층 구조에 신경 쓰지 않는다는 점에 유의해야 합니다. 위의 예에서와 같이 선택기에 의해 두 탐색 도구가 모두 선택됩니다!

Pseudo-class selector

:link - 링크 의사 클래스 선택기

는 링크를 방문하지 않을 때 스타일을 정의하는 데 사용됩니다.

<p class="nav">
    <p class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </p>
</p>

<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>

로그인 후 복사

: Visited - 링크 의사 클래스 선택기

는 방문한 링크 스타일을 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

<style>
    a:visited {
        text-decoration: none;
        color: red;
    }
</style>

로그인 후 복사

:active - 사용자 작업 의사 클래스 선택기

는 활성화된 요소를 정의하는 데 사용됩니다. 스타일, 일반적인 사용 방법은 다음과 같습니다.

<style>
    a:active {
        text-decoration: none;
        color: green;
    }
</style>

로그인 후 복사

:hover - 사용자 작업 의사 클래스 선택기

는 마우스가 해당 요소 위로 지나갈 때 요소의 스타일을 정의하는 데 사용됩니다.

<style>
    a:hover {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

로그인 후 복사

:focus - 사용자 작업 의사 클래스 클래스 선택기

는 포커스를 받는 요소의 스타일을 정의하는 데 사용됩니다. 일반적인 사용법은 다음과 같습니다.

<style>
    input:focus {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

로그인 후 복사

::first-line

은 다음과 같습니다. 요소 내 텍스트의 첫 번째 줄 스타일을 정의합니다. 일반적인 사용법은 다음과 같습니다.

<p class="doc">
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</p>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>

로그인 후 복사

::=first-letter

는 요소 내 첫 번째 문자의 스타일을 정의하는 데 사용됩니다.

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-letter {
        font-size: 2em;
        color: red;
    }
</style>

로그인 후 복사

CSS2

*에 정의된 선택기 - 와일드카드 선택기

는 DOM의 모든 요소에 대한 공통 스타일을 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다. 기본 스타일을 재설정하려면 와일드카드 선택기

[속성]——

attribute를 사용하지 않는 것이 좋습니다. 선택기
는 속성을 포함하는 요소의 스타일을 정의하는 데 사용됩니다.

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>

<style>
    .nav * {
        margin: 0;
    }
</style>

로그인 후 복사

[attribute="value"] - 속성 선택기

는 요소 속성을 정의하는 데 사용됩니다. 값은 지정된 값 스타일입니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active>Menu</li>
                <li>Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active] {
        color: red;
    }
</style>

로그인 후 복사

[attribute~=" value"] - 속성 선택기

는 지정된 값을 포함하고 속성 값 요소를 공백으로 구분하는 속성을 정의하는 데 사용됩니다. 공통 사용법은 다음과 같습니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="active">Menu</li>
                <li active>Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active="active"] {
        color: red;
    }
</style>

로그인 후 복사

위에 표시된 것처럼 첫 번째 li의 전경색만 빨간색으로 정의됩니다!

[attribute|="value"] - 속성 선택기

는 지정된 값을 포함하고 하이픈(-)으로 연결되는 속성 값을 정의하는 데 사용됩니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active~="active"] {
        color: red;
    }
</style>

로그인 후 복사

위와 같이 : 두 번째 li의 전경색만 빨간색으로 정의됩니다!

:first-child——구조적 의사 클래스 선택기

는 요소의 첫 번째 요소 스타일을 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active|="active"] {
        color: red;
    }
</style>

로그인 후 복사

참고: 첫 번째 하위 요소는 동일한 방식으로 작동합니다. 레벨과 동일합니다. 레이블의 첫 번째 요소입니다. 위와 같이 첫 번째 li의 스타일을 정의하려면 ul:first-child 대신 li:first-child를 사용해야 합니다!

:lang(en)

을 사용하여 속성을 정의합니다. lang= "en" 요소 스타일이므로 일반적인 사용 방법은 다음과 같습니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li:first-child {
        color: red;
    }
</style>

로그인 후 복사

::before

는 요소 앞에 내용과 스타일을 정의하는 데 사용되며 일반적인 사용 방법은 다음과 같습니다.

<p>
    <p lang="en">Hello World</p>
</p>

<style>
    p:lang(en) {
        color: red;
    }
</style>

로그인 후 복사

: :after

는 요소 뒤의 콘텐츠와 스타일을 정의하는 데 사용됩니다.

<p>
    <a>World</a>
</p>

<style>
    a::before {
        content: "Hello ";
    }
</style>

로그인 후 복사

p > p

는 요소의 첫 번째 수준 하위 요소의 스타일을 정의하는 데 사용됩니다.

<p>
    <a>Hello</a>
</p>

<style>
    a::after {
        content: "World";
    }
</style>

로그인 후 복사

h1 + p

요소에 인접한 요소 스타일을 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    .nav-tools > ul {
        background-color: red;
    }
    .nav-tools > li {
        /*这个不会生效，因为 li 不是 ul 的直接子元素*/
    }
</style>

로그인 후 복사

CSS3 새 속성 선택기

[foo ^="bar"]

는 요소 속성을 정의하는 데 사용됩니다. bar

<p>
    <h1>CSS</h1>
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</p>

<style>
    h1 + p {
        color: red;
    }
</style>

로그인 후 복사

로 시작하는 요소의 스타일은 위와 같으며 https 링크를 녹색으로 표시합니다.

[foo$="bar"]

요소 속성이 bar로 끝나는 요소의 스타일을 정의하는 데 사용됩니다

<p>
    <a href="http://www.betterde.com">Betterde Inc.</a>
    <a href="https://www.betterde.com">Betterde Inc.</a>
</p>

<style>
    a[href^="https"] {
        color:green;
    }
</style>

로그인 후 복사

위와 같이 하이퍼링크의 링크된 파일 형식을 식별하고 앞에 파일 형식 아이콘을 추가합니다. !

[foo*="바"]

用于定义元素属性中包含 bar 的元素的样式，需要注意的是，这里是包含，也就是说无论是什么样的组合，只要属性值还有这bar 这三个连续字母的都会被选中！

<p>
    <h1 class="title big full-right"></h1>
    <h2 class="title big full-right"></h1>
    <h1 class="big-title"></h1>
</p>
<style>
    a[class*="title"] {
        color: red;
    }
</style>

로그인 후 복사

如上所示：p 内的三个元素都将会被渲染为红色字体！

虽然 CSS3 中任然保留 CSS2 中定义的属性选择器，但是建议使用 CSS3 的属性选择器来替代！

结构伪类选择器

:root

用于定义 html 标签元素的样式

:nth-child(n)

用于定义子元素的样式，n 表示第几个子元素。n 可以是数字，或关键字odd、even或公式。常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-child(even) {
        background-color: red; 
    }
</style>

로그인 후 복사

:nth-last-child(n)

与 :nth-child(n)用法相同，只是排序方式是从后往前！

:nth-of-type(n)

用于定义相同元素的第 n 个元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-of-type(even) {
        background-color: red; 
    }
</style>

로그인 후 복사

:nth-last-of-type(n)

与 :nth-of-type(n)用法相同，只是排序方式是从后往前！

:last-child

用于定义最后一个元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-child {
        background-color: red; 
    }
</style>

로그인 후 복사

:first-of-type

定义第一个元素相同类型元素的样式，与 :nth-of-type(1) 效果一样

:last-of-type

定义最后一个元素相同类型元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-of-type {
        background-color: red; 
    }
</style>

로그인 후 복사

:only-child

用于定义子元素只有一个且与制定元素标签相同，常见使用方法如下：

<p>
    <h1>Hello</h1>
</p>

<style>
    h1:only-child {
        /*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

로그인 후 복사

:only-of-type

用于定义只包含一个制定的标签元素的样式，常见使用方法如下：

<p>
    <h1>Hello</h1>
</p>

<style>
    h1:only-of-type {
        /*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

로그인 후 복사

:empty

用于定义，一个元素中没有包含任何子元素的样式，常见使用方法如下：

<p>
    
</p>

<style>
    p:empty {
        display: none;
    }
</style>

로그인 후 복사

CSS3 新增的其他选择器

E ~ F

用于定义兄弟元素的样式，常见使用方法如下：

<p>
    <p>Hello</p>
</p>
<p>CSS</p>

<style>
    p ~ p {
        color: red;
    }
</style>

로그인 후 복사

p 元素中的 p 不会被渲染为红色字体，只有跟 p 是同级的 p 才会被渲染为红色！

:not(s)

用于定义指定元素，并且过滤 s 所指定的选择器元素，常见使用方法如下：

<p>
    <p class="red">Hello</p>
    <p class="blue">World</p>
    <p>Welcome!</p>
</p>

<style>
    p:not(.red) {
        color: blue;
    }
</style>

로그인 후 복사

注意：s 是一个简单的结构选择器，不能使用复合选择器，该选择器只匹配第一个复合条件的元素。如上所示，最后一个 p 不会被渲染为蓝色！

:target

用于定义被访问的锚链样式，常见使用方法如下：

<p>
    <p id="text-one">
        <p>这是第一个文本段</p>
    </p>
    <p id="text-two">
        <p>这是第二个文本段</p>
    </p>
</p>

<style>
    p:target {
        color: red;
    }
</style>

로그인 후 복사

注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 p 内的元素字体会被渲染为红色！

CSS3 UI 元素状态伪类选择器

:enabled

用于定义元素的 enabled 时的样式，常见使用方式如下：

<p>
    <input type="text">
</p>

<style>
    input:enabled {
        background: #ffff00;
    }
</style>

로그인 후 복사

注意：元素默认状态为 enabled

:disabled

用于定义元素处于禁用状态时的样式，常见使用方法如下：

<p>
    <input type="text" disabled="disabled"/>
</p>

<style>
    input:disabled {
        background: #dddddd;
    }
</style>

로그인 후 복사

:checked

用于定义元素被选中时的样式，常见使用方式如下：

<p>
    <form>
        <input type="checkbox" />
    </form>
</p>

<style>
    input:checked {
        color: green;
    }
</style>

로그인 후 복사

위 내용은 CSS 선택기에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 선택기에 대한 자세한 소개