CSS 선택자 선택자에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 선택자 선택자에 대한 자세한 설명

小云云

Dec 19, 2017 am 10:30 AM

css selector 선택자

CSS를 사용하여 HTML 페이지의 요소에 대한 일대일, 일대다 또는 다대일 제어를 달성하려면 CSS 선택기를 사용해야 합니다. HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다. 이 글은 CSS 스터디 노트에 CSS Selector 관련 정보를 주로 소개하고 있으니, 필요한 친구들이 참고하면 도움이 될 것 같습니다.

CSS1에 정의된 선택기

유형 선택기

는 지정된 유형의 요소를 선택하는 데 사용됩니다(사실 html 태그 선택기입니다). 일반적인 사용법은 다음과 같습니다.

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

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

로그인 후 복사

ID 선택기

가 사용됩니다. 지정된 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 - Link pseudo-class selector

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

<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 - Link pseudo- class selector

는 방문한 링크의 스타일을 정의하는 데 사용됩니다.

<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——사용자 Operation pseudo-class selector

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

<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

는 요소의 첫 번째 텍스트 줄을 정의하는 데 사용됩니다. 문자 스타일, 일반적인 사용법은 다음과 같습니다. CSS2

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

는 DOM에 있는 모든 요소의 공통 스타일을 정의하는 데 사용되며 일반적인 사용법은 다음과 같습니다.

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

로그인 후 복사

기본 스타일을 재설정하려면 권장되지 않습니다. 와일드카드 선택기

[속성] 사용 - 속성 선택기

는 속성이 포함된 요소의 스타일을 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

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

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

로그인 후 복사

[속성 = "값"]—— 속성 선택기

는 요소 속성의 값을 지정된 값 스타일로 정의하는 데 사용됩니다. 일반적인 사용 방법은 다음과 같습니다.

<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>
    <a href="http://www.betterde.com/logo.png">logo.png</a>
    <a href="http://www.betterde.com/style.css">style.css</a>
    <a href="http://www.betterde.com/main.js">main.js</a>
</p>

<style>
    a[href$="png"] {
        background: url(system/filetype/png.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="css"] {
        background: url(system/filetype/css.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="js"] {
        background: url(system/filetype/js.png) no-repeat left center;
        padding-left: 18px;
    }
</style>

로그인 후 복사

위에 표시된 대로: p 내의 세 요소는 모두 빨간색 글꼴로 렌더링됩니다!

CSS3은 여전히 CSS2에 정의된 속성 선택기를 유지하지만 대신 CSS3 속성 선택기를 사용하는 것이 좋습니다!

구조적 의사 클래스 선택기

:root

는 html 태그 요소의 스타일을 정의하는 데 사용됩니다.

:nth-child(n)

은 하위 요소의 스타일을 정의하는 데 사용됩니다. 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-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>

로그인 후 복사

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7720

자바 튜토리얼

1642

Cakephp 튜토리얼

1396

라라벨 튜토리얼

1289

PHP 튜토리얼

1233

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.