本文介紹了CSS 類選擇符和ID選擇符的區(qū)別，分享給大家，具體如下：

類選擇符

HTML代碼：

<div class="one"></div>
<div></div>

CSS代碼：

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

.one {
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}

如果想讓網(wǎng)頁中某些元素的外觀與其他同類標(biāo)簽區(qū)分開，可以使用類選擇符。

首先給選擇符起一個名字，然后把這個名字指定給想裝飾的HTML標(biāo)簽。例如上一個例子中，我就給第一個div命名為“one”。

類選擇符還能精確控制某個元素的外觀，而不管元素使用的是哪個標(biāo)簽。比如想要裝飾一段話里的一兩個詞，兒不想影響整個<p>標(biāo)簽的外觀。這時就可以用類選擇符選取要裝飾的詞。

需要注意的是，使用類選擇符選取某個標(biāo)簽里的部分單詞時，需要借助<span>標(biāo)簽。

類選擇符的用法：

1. 在CSS中，類選擇符的名稱必須以點號開頭。這樣Web瀏覽器才能在樣式表中找到類選擇符。
2. 類選擇符的名稱中只能包含字母、數(shù)字、連字符和下劃線。
3. 選擇符的名稱必須以字母開頭。
4. 類選擇符區(qū)分大小寫。
5. 在HTML中，標(biāo)簽設(shè)置class屬性。 <p class="類名"> 。

在HTML中，class屬性的值前面不用加點號。只有在樣式表中類選擇符的名稱前面需要點號。

一個標(biāo)簽使用多個類

除了可以把同一個類應(yīng)用到不同的標(biāo)簽上之外，一個標(biāo)簽還可以同時使用多個類。

編寫多個類樣式，在一個標(biāo)簽中設(shè)置多個類，聽起來要做很多工作，可在實際開發(fā)中卻經(jīng)常這么做。比較火的bootstrap框架就這么做的。

例如我們有多個div，每個div的大小、邊框都一樣，其他屬性各不相同。

HTML代碼：

<div class="div one"></div>
<div class="div two"></div>
<div class="div three"></div>

CSS代碼：

/* 類型選擇器 */
div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

/* 以下三個都是類選擇器 */
.one {
    background: linear-gradient(#1574A8, #15A892);
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
    background: radial-gradient(#E94E65, #15A892);
}
.three {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

Web瀏覽器和HTML都允許為同一個標(biāo)簽設(shè)置多個類。在HTML中，類通過class屬性指定，其值中的每個類名由空格分開。

瀏覽器會把各個類的屬性合并在一起，然后再應(yīng)用到元素上。

ID選擇符

CSS使用ID選擇符選取網(wǎng)頁中的特定部分，例如橫幅、導(dǎo)航欄或者主內(nèi)容區(qū)域。

在HTML中設(shè)置ID的方法與設(shè)置類的方法差不多，不過使用的屬性不同。

HTML代碼：

<div id="d1"></div>
<div></div>

CSS代碼：

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}
#d1 {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

在HTML中，元素設(shè)置id屬性。

在CSS中，用 # 井號開頭，后面跟著id名。

正確地使用ID

HTML的id屬性有些作用是class屬性實現(xiàn)不了的。這些優(yōu)勢與CSS沒關(guān)系，因此完全可以不適用ID選擇符。

ID的優(yōu)勢：

1. 為網(wǎng)頁重點元素設(shè)定ID后，JavaScript程序員可以通過ID輕易定位并處理網(wǎng)頁中的某部分內(nèi)容。例如，程序員經(jīng)常會為表單的元素設(shè)定ID，例如填寫訪客名字的文本框。JavaScript通過ID定位這個表單元素后可以做很多處理，例如，確保訪客提交表單時哪個字段不是空的。
2. 使用ID還能鏈接到網(wǎng)頁中的特定部分，對內(nèi)容多的網(wǎng)頁來說，這樣便于快速導(dǎo)航。如果有個按字母表順序排列的術(shù)語表，可以使用ID選擇符鏈接到以各個字母開頭的部分。

Web設(shè)計圈有個趨勢，盡量不在CSS中使用ID選擇符。

我的理解是因為ID選擇符的特指度比較高，后續(xù)如果要覆蓋樣式會增大難度。而且ID的使用程度沒類的使用程度廣。

ID屬性就相當(dāng)于我們?nèi)说纳矸葑C，具有唯一的標(biāo)示性。

類屬性就有點類似人的價值觀，擁有同一種價值觀的人可以有很多，一個人也可以同時擁有幾種價值觀。

ID選擇器和類選擇器的不同點

1. 一個元素可以有多個類，一個類也可以添加到多個元素中。
2. 一個ID在同一個網(wǎng)頁中只能出現(xiàn)一次，一個元素只能有一個ID。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論