CSS中的偽類別選取器和虛擬元素選取器的程式碼分析

來源:互聯網
上載者:User

本篇文章給大家帶來的內容是關於CSS中偽類別選取器以及虛擬元素選取器的介紹(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

一、連結偽類

1、連結偽類

        /*連結偽類*/        注意:link,:visited,:target是作用於連結元素的!                :link       表示作為超連結,並指向一個未訪問的地址的所有錨                :visited    表示作為超連結,並指向一個已訪問的地址的所有錨                :target     代表一個特殊的元素,它的id是URI的片段標識符

2、代碼執行個體:
01_錨點偽類.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_錨點偽類.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>

二、動態偽類

1、動態偽類

        /*動態偽類*/        注意: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>

三、隱私與:visited選取器

1、隱私與:visited選取器

/*隱私與:visited選取器*/只有下列的屬性才能被應用到已訪問連結:    color  background-color  border-color

四、表單相關偽類

1、表單相關偽類

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

2、代碼執行個體:
01_表單狀態.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_表單狀態.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>

四、結構性偽類

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>

五、虛擬元素

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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.