溫馨提示×

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

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

Css3選擇器(一)

發(fā)布時(shí)間：2020-07-24 01:17:34 來源：網(wǎng)絡(luò) 閱讀：476 作者：yeleven 欄目：開發(fā)技術(shù)

一、元素選擇器

    1.最常見的選擇器就是元素選擇器，文檔的元素就是最基本的選擇器

        例如：h2{} a{} ……  

<p>HelloWorld</p>
p{
    color: blue;
}


二、選擇器分組

    1.例子：

        h2、h3{}

h2,h3{
    color: red;
}


    2.通配符：

        *{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h2>標(biāo)題1</h2>
    <h3>標(biāo)題2</h3>
    <p>HelloWorld</p>
</body>
</html>
*{
    color: red;
}
h2,h3{
    font-size: 45px;
}

    通常會(huì)使用通配符來取消內(nèi)外邊距

*{
    margin: 0px;
    padding: 0px;
}


三、類選擇器

    1.類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式

        例如：.class{}

.div{
    color: red;
}

    2.結(jié)合元素選擇器

        例如：a.class{}

a.div{
    color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="div">
        HelloWorld
    </div>

    <a class="div">HelloWorld</a>
</body>
</html>

    3.多類選擇器

        例如：.class.class{}

.p1{
    color: blue;
}
.p2{
    font-size: 30px;
}
.p1.p2{
    font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p class="p1">This is my web page</p>
    <p class="p2">This is my web page</p>
    <p class="p1 p2">This is my web page</p>
</body>
</html>









向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
助
手