溫馨提示×

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

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

5-CSS的選擇器

發(fā)布時(shí)間：2020-06-01 14:49:58 來源：網(wǎng)絡(luò) 閱讀：174 作者：代碼老兵 欄目：web開發(fā)

選擇器

屬性
通過屬性的復(fù)雜疊加才能做出漂亮的網(wǎng)頁(yè)

選擇器
通過選擇器找到對(duì)應(yīng)的標(biāo)簽設(shè)置樣式

選擇器的作用
選擇對(duì)應(yīng)的標(biāo)簽，為之添加樣式

標(biāo)簽選擇器
根據(jù)標(biāo)簽名找到標(biāo)簽

類選擇器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /*標(biāo)簽選擇器*/
        div{
            color: red;
        }

        p{
            color: greenyellow;
        }

    </style>

</head>
<body>
    <div>22222222222</div>
    <div>22222222222</div>
    <div>22222222222</div>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
</body>
</html>

代碼：這是普通的頁(yè)內(nèi)樣式； 注意style中的注釋方式不一樣。

5-CSS的選擇器

上圖：
可以看到業(yè)內(nèi)樣式設(shè)計(jì)成功； 那怎么將其中部分內(nèi)容單獨(dú)進(jìn)行設(shè)計(jì)呢，使用行內(nèi)樣式的確可以做到，但是body中一般都是做內(nèi)容和結(jié)構(gòu)，所以盡量不要使用行內(nèi)設(shè)計(jì)。
所以我們可以通過類選擇器來設(shè)計(jì)，為某個(gè)或多個(gè)內(nèi)容進(jìn)行類命名，然后針對(duì)命名的類進(jìn)行設(shè)計(jì)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /*標(biāo)簽選擇器*/
        div{
            color: red;
        }

        p{
            color: greenyellow;
        }

        /*類選擇器*/
        .test1{
            color: blue;
        }
    </style>

</head>
<body>
    <div>22222222222</div>
    <div>22222222222</div>
    <div class="test1">22222222222</div>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p class="test1">1111111111111111</p>
</body>
</html>

代碼↓
在body中為兩個(gè)內(nèi)容進(jìn)行類命名為 test1；
通過點(diǎn)“.”+類選擇器名稱，對(duì)類命名為test1的內(nèi)容進(jìn)行設(shè)計(jì)。

5-CSS的選擇器

上圖：可以看到類選擇器的設(shè)計(jì)為藍(lán)色

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /*標(biāo)簽選擇器*/
        div{
            color: red;
        }

        p{
            color: greenyellow;
        }

        /*類選擇器*/
        .test1{
            color: blue;
        }
        /*id選擇器*/
        #main{
            font-size: 60px;
        }
    </style>

</head>
<body>
    <div id="main">22222222222</div>
    <div>22222222222</div>
    <div>22222222222</div>
    <div>22222222222</div>
    <div class="test1">22222222222</div>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p class="test1">1111111111111111</p>
</body>
</html>

代碼↓：
在body中，在內(nèi)容中使用 id="" 來定義id，這個(gè)id是唯一的，不可重復(fù)，否則會(huì)報(bào)錯(cuò)；不過在html中多個(gè)內(nèi)容使用同一個(gè)id也是可以成功的，這是因?yàn)閔tml是弱類型語(yǔ)言，在JS中就會(huì)報(bào)錯(cuò)。
在style中使用#main{} 來設(shè)計(jì)該id的樣式

5-CSS的選擇器

并列選擇器

        p , #main{
            border: 4px dashed green;
        }

代碼↓：
在style中加入上面的代碼； 表示或p或#main的標(biāo)簽都會(huì)被設(shè)計(jì)；
可以放多種標(biāo)簽進(jìn)行同時(shí)設(shè)計(jì)

5-CSS的選擇器

復(fù)合選擇器

復(fù)合選擇器就是與的關(guān)系。
不管放了幾個(gè)標(biāo)簽，都必須同時(shí)符合才會(huì)生效設(shè)計(jì)內(nèi)容。

       /*復(fù)合選擇器*/
        p.test1{
            font-size: 66px;
        }
        div#main{
            font-size: 10px;
        }

代碼：新增上面的代碼； 設(shè)計(jì)了兩個(gè)復(fù)合選擇器； 每個(gè)復(fù)合選擇器的兩個(gè)條件都必須同時(shí)滿足，注意復(fù)合標(biāo)簽之間不能有空格。

5-CSS的選擇器

上圖：可以看到同時(shí)滿足兩個(gè)復(fù)合條件的標(biāo)簽的字體大小改變了。

后代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /*標(biāo)簽選擇器*/
        div{
            color: red;
        }

        p{
            color: greenyellow;
        }

        /*類選擇器*/
        .test1{
            color: blue;
        }
        /*id選擇器*/
        #main{
            font-size: 60px;
        }

        /*并列選擇器*/
        p , #main{
                     border: 4px dashed green;
                 }

        /*復(fù)合選擇器*/
        p.test1{
            font-size: 66px;
        }
        div#main{
            font-size: 10px;
        }

        /*后代選擇器*/
        div .test3 a{
            font-size: 66px;
        }

    </style>

</head>
<body>
    <div id="main">22222222222</div>
    <div>22222222222</div>
    <div>22222222222</div>
    <div>22222222222</div>
    <div class="test1">22222222222</div>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p>1111111111111111</p>
    <p class="test1">1111111111111111</p>
    <div id="test2">
        <p class="test3">
            <a href="#">我是超鏈接</a>
        </p>

    </div>
</body>
</html>

代碼↓：
body下面增加了部分內(nèi)容；
style中增加了后代選擇器設(shè)計(jì)，先滿足div標(biāo)簽，div后面要滿足.test3標(biāo)簽，test3后面要滿足a標(biāo)簽； 

        /*后代選擇器*/
        /*div .test3 a{*/
        /*    font-size: 66px;*/
        /*}*/

        div  a{
            font-size: 66px;
        }

代碼：如果把中間的某一個(gè)標(biāo)簽去掉也是可以的，因?yàn)閍也屬于div的后代。

5-CSS的選擇器

        /*后代選擇器*/
        /*div .test3 a{*/
        /*    font-size: 66px;*/
        /*}*/

        /*div  a{*/
        /*    font-size: 66px;*/
        /*}*/

        #test2 .test3 a{
            font-size: 66px;
        }

代碼：將最前面的標(biāo)簽改成#test2 也是滿足條件的。

直接后代選擇器

與后代選擇器效果差不多，但要求必須是緊挨著的下一級(jí)符合才可以，跳過匹配某個(gè)標(biāo)簽的后代是不生效的。

5-CSS的選擇器

上圖：
必須是div下面緊挨著的p標(biāo)簽才會(huì)生效；
div下的span的p標(biāo)簽是不生效的；

直接后代選擇器表達(dá)： div > p{}

相鄰兄弟選擇器

5-CSS的選擇器

上圖：倒數(shù)第2個(gè)p標(biāo)簽與其上面的div標(biāo)簽相鄰

屬性選擇器

5-CSS的選擇器

上圖：匹配div標(biāo)簽，且div中有名為name的屬性； 第1條和第2條會(huì)相匹配。

5-CSS的選擇器

上圖：多屬性選擇器的匹配方法。 第二條匹配。

5-CSS的選擇器

上圖：匹配div，名為name的屬性，且name屬性的值要是“jack”，滿足這三個(gè)條件才能匹配

偽類選擇器

5-CSS的選擇器

其中常用的有focus和hover

  • focus
/*偽類選擇器*/
input:focus{
    width: 500px;
    height: 60px;
<input type="text" value="">

上2代碼：body中添加input內(nèi)容； style添加針對(duì)input:focus的設(shè)計(jì)；

5-CSS的選擇器

上圖：默認(rèn)沒有點(diǎn)擊的樣式

5-CSS的選擇器

上圖：點(diǎn)擊后的樣式，就變成我們?cè)O(shè)計(jì)的樣子了，高度和寬度再點(diǎn)擊（聚焦）的時(shí)候就改變了。

input:focus{
    width: 500px;
    height: 60px;
    /*調(diào)整邊框*/
    outline: none;
    border: 1px solid red;

代碼：調(diào)整邊框，先將原來的邊框給去掉（outline: none），才能重新定義新的邊框。

5-CSS的選擇器

上圖：如果不先去掉原來的邊框，新的border 樣式就不會(huì)生效。

  • hover
/*id選擇器*/
#main{
    font-size: 60px;
    width: 500px;
    height: 200px;
    background: deepskyblue;
}

代碼：修改id選擇器的設(shè)計(jì)樣式

5-CSS的選擇器

上圖：當(dāng)前修改后的樣式

#main:hover{
    width: 100px;
    height: 100px;
}

代碼：在style中增加上面的代碼的樣式

5-CSS的選擇器

上圖：將鼠標(biāo)懸浮在上面的時(shí)候，可以看到邊框大小改變了。

偽元素

5-CSS的選擇器

#test4:first-letter{
            font-size: 55px;
        }
<p id="test4">我是段落</p>

上2代碼：
body增加一個(gè)段落，并且使用id選擇器；
style中增加first-letter偽元素

5-CSS的選擇器

上圖：文本的第一個(gè)字母的樣式改變了

向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)容。

web
AI
助
手