溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中偽類選擇器和偽元素選擇器的示例

發(fā)布時(shí)間：2021-01-29 13:49:50 來源：億速云 閱讀：176 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS中偽類選擇器和偽元素選擇器的示例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于CSS中偽類選擇器以及偽元素選擇器的介紹（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

一、鏈接偽類

1、鏈接偽類

        /*鏈接偽類*/        注意:link，:visited，:target是作用于鏈接元素的！        
        :link       表示作為超鏈接，并指向一個(gè)未訪問的地址的所有錨        
        :visited    表示作為超鏈接，并指向一個(gè)已訪問的地址的所有錨        
        :target     代表一個(gè)特殊的元素，它的id是URI的片段標(biāo)識(shí)符

2、代碼實(shí)例：
01_錨點(diǎn)偽類.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:link：表示作為超鏈接，并指向一個(gè)未訪問的地址的所有錨-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: deeppink;            }
            #test:link{                background: pink;            }
        </style>
    </head>
    <body>
        <a href="#">點(diǎn)我點(diǎn)我點(diǎn)我</a>
        <p id="test">我是p啦</p>
    </body>

02_錨點(diǎn)偽類.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:visited：表示作為超鏈接，并指向一個(gè)已訪問的地址的所有錨-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: black;            }
            a:visited{                color: pink;            }
        </style>
    </head>
    <body>
        <a href="#">點(diǎn)我點(diǎn)我點(diǎn)我</a>
    </body>

03_target.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:target 代表一個(gè)特殊的元素，這個(gè)元素的id是URI的片段標(biāo)識(shí)符。--> 
        <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>

二、動(dòng)態(tài)偽類

1、動(dòng)態(tài)偽類

        /*動(dòng)態(tài)偽類*/        注意:hover，:active基本可以作用于所有的元素！        
        :hover      表示懸浮到元素上        
        :active     表示匹配被用戶激活的元素（點(diǎn)擊按住時(shí)）
注意：
由于a標(biāo)簽的:link和:visited可以覆蓋了所有a標(biāo)簽的狀態(tài)，所以當(dāng):link，:visited，:hover，:active同時(shí)出現(xiàn)在a標(biāo)簽身上時(shí) :link和:visited不能放在最后?。?！

2、代碼實(shí)例：

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

三、隱私與:visited選擇器

1、隱私與:visited選擇器

/*隱私與:visited選擇器*/只有下列的屬性才能被應(yīng)用到已訪問鏈接
：    color  background-color  border-color

四、表單相關(guān)偽類

1、表單相關(guān)偽類

    /*表單相關(guān)偽類*/
    :enabled    匹配可編輯的表單    
    :disable    匹配被禁用的表單    
    :checked    匹配被選中的表單    
    :focus      匹配獲焦的表單

2、代碼實(shí)例：
01_表單狀態(tài).html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標(biāo)題文檔</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_表單狀態(tài).html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標(biāo)題文檔</title>
        <style>
            input:checked {                width: 100px;                height: 100px;            }
        </style>
    </head>

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

03_獲取焦點(diǎn).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>無標(biāo)題文檔</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>

四、結(jié)構(gòu)性偽類

1、結(jié)構(gòu)性偽類

/*結(jié)構(gòu)性偽類*/index的值從1開始計(jì)數(shù)?。。?！
index可以為變量n(只能是n)
index可以為even odd    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 這個(gè)子元素必須是ele    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素
    除此之外:nth-child和:nth-of-type有一個(gè)很重要的區(qū)別！！
            nth-of-type以元素為中心！?。?

:nth-child(index)系列         
    :first-child
    :last-child
    :nth-last-child(index)
    :only-child (相當(dāng)于: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   (相當(dāng)于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not        :empty(內(nèi)容必須是空的，有空格都不行，有attr沒關(guān)系)

2、代碼實(shí)例：

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

            /*子元素的標(biāo)簽應(yīng)該要統(tǒng)一*/
            /*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>

五、偽元素

1、偽元素

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

2、代碼實(shí)例：
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: "我在內(nèi)容的后面";            }
        </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: "我在內(nèi)容的前面";            }
        </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>

關(guān)于“CSS中偽類選擇器和偽元素選擇器的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手