Codeanalyse von Pseudoklassenselektoren und Pseudoelementselektoren in CSS-CSS-Tutorial-php.cn

Dieser Artikel bietet Ihnen eine Einführung in Pseudo-Klassen-Selektoren und Pseudo-Element-Selektoren (mit Code). Ich hoffe, er wird Ihnen als Referenz dienen Du hast geholfen.

1. Link-Pseudoklasse

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

2. Dynamische Pseudoklasse

1. Dynamische Pseudoklasse

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

Nach dem Login kopieren

2. Codebeispiel:

    <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>

Nach dem Login kopieren

3. Datenschutz und :visited-Selektor

1. Datenschutz und: besuchter Selektor

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

Nach dem Login kopieren

4. Formularbezogene Pseudoklassen

1. Formularbezogene Pseudoklassen

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

Nach dem Login kopieren

2 , Codebeispiel: 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

03_get focus.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>

Nach dem Login kopieren

04 _Simulate-Optionsfeld .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>

Nach dem Login kopieren

4. Strukturelle Pseudoklasse

/*结构性伪类*/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没关系)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

5. Pseudoelemente

1. Pseudoelemente

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

Nach dem Login kopieren

2. Codebeispiel:

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Einige Auswahlen unter Verwendung von Pseudoklassen, Pseudoelementen und angrenzenden Elementen in CSS. Fähigkeiten von Selektoren

Zusammenfassung der Selektortypen in CSS und Beispiele für Effizienzvergleiche

Das obige ist der detaillierte Inhalt vonCodeanalyse von Pseudoklassenselektoren und Pseudoelementselektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!