css選擇器有幾種分類

發(fā)布時(shí)間：2021-05-21 10:36:18 來(lái)源：億速云閱讀：347 作者：小新欄目：web開(kāi)發(fā)

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

css選擇器的分類有：1、標(biāo)簽選擇器；2、類選擇器；3、ID選擇器；4、全局選擇器；5、組合選擇器；6、繼承選擇器；7、偽類選擇器；8、字符串匹配的屬性選擇符。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css選擇器的種類是有很多的，下面我們就來(lái)看一看css選擇器的類型

1、標(biāo)簽選擇器（如：body,p,p,ul,li）。

2、類選擇器（如：class=“head”,class=“head_logo”）。

3、ID選擇器（如：id=“name”,id=“name_txt”）。

4、全局選擇器（如：*號(hào)）。

5、組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開(kāi)）。

6、繼承選擇器（如：p p,注意兩選擇器用空格鍵分開(kāi)）。

7、偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。）。

8、字符串匹配的屬性選擇符(^ $ *三種，分別對(duì)應(yīng)開(kāi)始、結(jié)尾、包含) 。

上述八種css選擇器中最常用的css選擇器是標(biāo)簽選擇器、.類選擇器、ID選擇器、屬性選擇器、偽類選擇器。

下面我們就分別對(duì)這五個(gè)css選擇器來(lái)舉一個(gè)例子：（其他選擇器例子可以參考css手冊(cè)）

（1）標(biāo)簽選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>余生有你</p>
    <p>幸得安喜</p>
</body>
</html>

效果如下：

css選擇器有幾種分類

（2）.類選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .class1{
            background-color: blue;
        }
        .class2{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="class1">div</div>
    <div class="class2">div</div>
    <div class="class3">div</div>
</body>
</html>

效果如下：

css選擇器有幾種分類

（3）ID選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #class1{
            background-color: blue;
        }
        #class2{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="class1">div</div>
    <div id="class2">div</div>
    <div id="class3">div</div>
</body>
</html>

效果如下：

css選擇器有幾種分類

（4）屬性選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        div[id=class2]{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="class1">div</div>
    <div id="class2">div</div>
    <div id="class3">div</div>
</body>
</html>

效果如下：

css選擇器有幾種分類

（5）偽類選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
           color: brown;
           background: cornsilk;
        }
        a:hover{
           text-decoration: none;
           color: rgb(252, 0, 0);
        }
        a:active{
            background: rgb(202, 0, 175);
            color: rgb(59, 59, 59);
        }
        a:visited{
            color: brown;
            background: cornsilk;
        }
    </style>
</head>
<body>
    <a href="http://www.cctv.com">哈嘍，看我，你在干什么</a>
</body>
</html>

效果：

css選擇器有幾種分類

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

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

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

css選擇器有幾種分類

css的全稱是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽