CSS의 의사 클래스 선택기와 의사 요소 선택기의 코드 분석-CSS 튜토리얼-php.cn

1. 의사 클래스 연결

2. 동적 의사 클래스

집

웹 프론트엔드

CSS 튜토리얼

CSS의 의사 클래스 선택기와 의사 요소 선택기의 코드 분석

不言

Sep 05, 2018 pm 06:00 PM

의사 요소 선택기 의사 클래스 선택기

이 글은 CSS의 의사 클래스 선택기와 의사 요소 선택기에 대한 소개를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

1. 의사 클래스 연결

1. 의사 클래스 연결

        /*链接伪类*/        注意:link，:visited，:target是作用于链接元素的！        
        :link       表示作为超链接，并指向一个未访问的地址的所有锚        
        :visited    表示作为超链接，并指向一个已访问的地址的所有锚        
        :target     代表一个特殊的元素，它的id是URI的片段标识符

로그인 후 복사

2. 코드 예:
01_anchor pseudo-class.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: deeppink;            }
            #test:link{                background: pink;            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
        <p id="test">我是p啦</p>
    </body>

로그인 후 복사

02_anchor pseudo-class.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: black;            }
            a:visited{                color: pink;            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
    </body>

로그인 후 복사

03_target .html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> 
        <style type="text/css">
            *{                margin: 0;                padding: 0;            }
            p{                width: 300px;                height: 200px;                line-height: 200px;                background: black;                color: pink;                text-align: center;                display: none;            }
            :target{                display: block;            }
        </style>
    </head>
    <body>
        <a href="#p1">p1</a>
        <a href="#p2">p2</a>
        <a href="#p3">p3</a>
        <p id="p1">
            p1        </p>
        <p id="p2">
            p2        </p>
        <p id="p3">
            p3        </p>
    </body>

로그인 후 복사

2. 동적 의사 클래스

        /*动态伪类*/        注意:hover，:active基本可以作用于所有的元素！        
        :hover      表示悬浮到元素上        
        :active     表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

로그인 후 복사

2. 코드 예:

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test:hover{                color: pink;            }
            #test:active{                color: red;            }
        </style>
    </head>
    <body>
        <p id="test">
            我是test        </p>
    </body>

로그인 후 복사

3. 개인 정보 보호 및: 방문 선택기

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接
：    color  background-color  border-color

로그인 후 복사

4. 폼 관련 의사 클래스

1. 폼 관련 의사 클래스

    /*表单相关伪类*/
    :enabled    匹配可编辑的表单    
    :disable    匹配被禁用的表单    
    :checked    匹配被选中的表单    
    :focus      匹配获焦的表单

로그인 후 복사

2. 코드 예: 01_form status.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input {                width: 100px;                height: 30px;                color: #000;            }

            input:enabled {                color: red;            }

            input:disabled {                color: blue;            }
        </style>
    </head>

    <body>
        <input type="text" value="晓飞张" />
        <input type="text" value="晓飞张" disabled="disabled" />
    </body>

로그인 후 복사

02_form status.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input:checked {                width: 100px;                height: 100px;            }
        </style>
    </head>

    <body>
        <input type="checkbox" />
    </body>

로그인 후 복사

03_ 포커스를 받으세요. html

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input:focus{                background: pink;            }
            p:focus{                background: pink;            }

        </style>
    </head>
    <body>
        <input type="text"  value="" />
        <p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
    </body>

로그인 후 복사

04_시뮬레이트 라디오 버튼.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            label {                float: left;                margin: 0 5px;                overflow: hidden;                position: relative;            }

            label input {                position: absolute;                left: -50px;                top: -50px;            }

            span {                float: left;                width: 50px;                height: 50px;                border: 3px solid #000;            }

            input:checked~span {                background: red;            }
        </style>
    </head>

    <body>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
    </body>

로그인 후 복사

4. 구조적 의사 클래스

1. 구조적 의사 클래스

/*结构性伪类*/index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 这个子元素必须是ele    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素
    除此之外:nth-child和:nth-of-type有一个很重要的区别！！
            nth-of-type以元素为中心！！！

:nth-child(index)系列         
    :first-child
    :last-child
    :nth-last-child(index)
    :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
    :first-of-type
    :last-of-type
    :nth-last-type(index)
    :only-of-type   (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not        :empty(内容必须是空的，有空格都不行，有attr没关系)

로그인 후 복사

2. 코드 예:

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            /*子元素的标签应该要统一*/
            /*ul .item:nth-child(3){
                border: 1px solid;
            }*/


            ul .item:nth-of-type(3){                border: 1px solid;            }
            /*ul p:nth-of-type(3){
                border: 1px solid;
            }
            ul p:nth-of-type(3){
                border: 1px solid;
            }
            ul li:nth-of-type(3){
                border: 1px solid;
            }*/
        </style>
    </head>
    <body>
        <ul>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <li class="item">6</li>
            <li class="item">7</li>
            <li class="item">8</li>
            <li class="item">9</li>
        </ul>
    </body>

로그인 후 복사

04_not.html

<head>
        <meta charset="UTF-8">
        <title>not</title>
        <style type="text/css">
            * {                margin: 0;                padding: 0;                border: none;            }

            a {                text-decoration: none;                color: #333;                font-size: 14px;                display: block;                float: left;                width: 100px;                height: 30px;            }

            p {                width: 800px;                margin: 0 auto;            }

            p>a:not(:last-of-type) {                border-right: 1px solid red;            }
        </style>
    </head>

    <body>
        <p>
            <a href="#">first</a>
            <a href="#">second</a>
            <a href="#">third</a>
            <a href="#">fourth</a>
            <a href="#">fifth</a>
        </p>
    </body>

로그인 후 복사

05_empty.html

<head>
        <meta charset="UTF-8">
        <title>empty</title>
        <style type="text/css">
            p {                height: 200px;                background: #abcdef;            }

            p:empty {                background: #f00;            }
        </style>
    </head>

    <body>
        <p></p>
        <p>Second</p>
        <p></p>
        <p>Third</p>
    </body>

로그인 후 복사

5. 의사 요소

1. 의사 요소

/*伪元素*/
    ::after
    ::before
    ::firstLetter
    ::firstLine
    ::selection

로그인 후 복사

2. 코드 예: after.html

<head>
        <meta charset="UTF-8">
        <title>after</title>
        <style type="text/css">
            p {                width: 300px;                height: 100px;                border: 1px solid #000;            }

            p::after {                content: "我在内容的后面";            }
        </style>
    </head>

    <body>
        <p>伪元素</p>
    </body>

로그인 후 복사

before.html

<head>
        <meta charset="UTF-8">
        <title>before</title>
        <style type="text/css">
            p {                width: 300px;                height: 100px;                border: 1px solid #000;            }

            p::before {                content: "我在内容的前面";            }
        </style>
    </head>

    <body>
        <p>伪元素</p>
    </body>

로그인 후 복사

firstLetter.html

<head>
        <meta charset="UTF-8">
        <title>First-Letter</title>
        <style type="text/css">
            p {                width: 500px;                margin: 0 auto;                font-size: 12px;            }

            p::first-letter {                color: #f00;                font-size: 24px;                font-weight: bold;            }
        </style>
    </head>

    <body>
        <p>sssss</p>
    </body>

로그인 후 복사

firstLine. html

<head>
        <meta charset="UTF-8">
        <title>First-Line</title>
        <style type="text/css">
            p {                width: 500px;                margin: 0 auto;            }

            p::first-line {                color: #f00;                font-weight: bold;            }
        </style>
    </head>

    <body>
        <p>
            sssss<br> sssss            <br> sssss            <br>
        </p>
    </body>

로그인 후 복사

Selection.html

<head>
        <meta charset="UTF-8">
        <title>Selection</title>
        <style type="text/css">
            p::selection {                background: red;                color: pink;            }
        </style>
    </head>

    <body>
        <p>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</p>
    </body>

로그인 후 복사

핫 AI 도구

Video Face Swap

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

뜨거운 도구

뜨거운 주제

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

7681

Cakephp 튜토리얼

1393

C# 튜토리얼

1209

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

CSS에서 호버는 무엇을 의미합니까? Feb 22, 2024 pm 01:24 PM

CSS의 :hover는 사용자가 특정 요소 위로 마우스를 가져갈 때 특정 스타일을 적용하는 데 사용되는 의사 클래스 선택기입니다. 요소 위로 마우스를 가져가면 :hover를 통해 요소에 다양한 스타일을 추가하여 사용자 경험과 상호 작용을 향상할 수 있습니다. 이 기사에서는 hover의 의미에 대해 자세히 논의하고 특정 코드 예제를 제공합니다. 먼저 CSS에서 :hover의 기본 사용법을 이해하겠습니다. CSS에서는 선택기를 사용하여 :hover 효과를 적용하려는 요소를 선택하고 그 뒤에 추가할 수 있습니다.

CSS에서 li 태그 앞의 점을 제거하는 방법 Apr 28, 2024 pm 12:36 PM

CSS의 li 태그에서 점을 제거하는 방법에는 두 가지가 있습니다. 1. "list-style-type: none;" 스타일을 사용합니다. 2. 투명 이미지와 "list-style-image: url("transparent.png")을 사용합니다. ; "스타일. 두 방법 모두 모든 li 태그의 점을 제거할 수 있습니다. 특정 li 태그의 점만 제거하려면 의사 클래스 선택기를 사용할 수 있습니다.

HTML에서 hover의 역할 Feb 20, 2024 am 08:58 AM

HTML 및 특정 코드 예제에서 호버의 역할 웹 개발에서 호버는 사용자가 요소 위에 커서를 놓으면 일부 작업이나 효과가 트리거되는 것을 의미합니다. 이는 CSS :hover 의사 클래스를 통해 구현됩니다. 이번 글에서는 hover의 역할과 구체적인 코드 예시를 소개하겠습니다. 첫째, hover를 사용하면 사용자가 요소 위로 마우스를 가져갈 때 요소의 스타일이 변경됩니다. 예를 들어 버튼 위에 마우스를 올리면 버튼의 배경색이나 텍스트 색상을 변경하여 사용자에게 다음에 수행할 작업을 상기시킬 수 있습니다.

사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. Nov 20, 2023 am 11:52 AM

사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. CSS에서 의사 클래스 선택기는 다음과 같은 강력한 도구입니다. 특정 선택 방법을 통해 선택됩니다. HTML 문서의 특정 요소입니다. 그 중 :nth-child()는 특정 위치의 자식 요소를 선택할 수 있는 일반적으로 사용되는 가상 클래스 선택자입니다. :nth-child(n)은 HTML의 n번째 자식 요소와 일치할 수 있고, :nth-child(-n)는 일치할 수 있습니다.

CSS에서 ::의 의미는 무엇입니까? Apr 28, 2024 pm 03:45 PM

CSS의 :: 의사 클래스 선택기는 요소의 특수 상태나 동작을 지정하는 데 사용되며 의사 클래스 선택기보다 더 구체적이며 요소의 특정 속성이나 상태를 선택할 수 있습니다.

CSS에서 콘텐츠 속성 사용 Feb 19, 2024 am 10:56 AM

CSS의 content 속성 사용 CSS의 content 속성은 의사 클래스에 추가 콘텐츠를 삽입하는 데 사용되는 매우 유용한 속성입니다. 콘텐츠 속성은 일반적으로 의사 클래스 선택기(예: ::before 및 ::after)에서만 사용할 수 있으며 텍스트나 이미지와 같은 콘텐츠를 삽입하는 데 사용할 수 있습니다. content 속성을 통해 매우 멋진 효과를 얻을 수 있습니다. 다음은 content 속성의 몇 가지 용도와 특정 코드 예제입니다.

:nth-last-child(2) 의사 클래스 선택기를 사용하여 마지막에서 두 번째 하위 요소의 스타일을 선택하세요. Nov 20, 2023 am 11:22 AM

끝에서 두 번째 자식 요소의 스타일을 선택하려면 :nth-last-child(2) 의사 클래스 선택기를 사용하세요. CSS에서 의사 클래스 선택기는 선택하는 데 사용할 수 있는 매우 강력한 도구입니다. 문서 트리. 그 중 하나는 :nth-last-child(2) 가상 클래스 선택기인데, 이는 마지막에서 두 번째 자식 요소를 선택하고 여기에 스타일을 적용합니다. 먼저 이 의사 클래스 선택기를 사용할 수 있도록 샘플 HTML 문서를 만들어 보겠습니다. ~에 의해

CSS에서 호버를 사용하는 방법 Feb 23, 2024 pm 12:06 PM

CSS의 hover 의사 클래스는 마우스를 요소 위로 가져갈 때 요소의 스타일을 변경할 수 있는 매우 일반적으로 사용되는 선택기입니다. 이 문서에서는 hover 사용법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 기본 사용법 hover를 사용하려면 먼저 요소의 스타일을 정의한 다음 :hover 가상 클래스를 사용하여 마우스를 가리키고 있을 때 해당 스타일을 지정해야 합니다. 예를 들어, 버튼 위에 마우스를 올리면 버튼의 배경색이 빨간색으로 바뀌고 텍스트 색상이 흰색으로 바뀌고 싶습니다.

See all articles

CSS의 의사 클래스 선택기와 의사 요소 선택기의 코드 분석

1. 의사 클래스 연결

2. 동적 의사 클래스

/表单相关伪类/ :enabled 匹配可编辑的表单 :disable 匹配被禁用的表单 :checked 匹配被选中的表单 :focus 匹配获焦的表单
로그인 후 복사

/伪元素/ ::after ::before ::firstLetter ::firstLine ::selection
로그인 후 복사

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

CSS의 의사 클래스 선택기와 의사 요소 선택기의 코드 분석

1. 의사 클래스 연결

2. 동적 의사 클래스

/*表单相关伪类*/ :enabled 匹配可编辑的表单 :disable 匹配被禁用的表单 :checked 匹配被选中的表单 :focus 匹配获焦的表单로그인 후 복사

/*伪元素*/ ::after ::before ::firstLetter ::firstLine ::selection로그인 후 복사

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

/表单相关伪类/ :enabled 匹配可编辑的表单 :disable 匹配被禁用的表单 :checked 匹配被选中的表单 :focus 匹配获焦的表单
로그인 후 복사

/伪元素/ ::after ::before ::firstLetter ::firstLine ::selection
로그인 후 복사