CSS三大基礎(chǔ)選擇器 2.類選擇器

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-17

在頁面當(dāng)中，可能有一些元素的元素名并不相同，但是依然需要它們擁有相同的樣式。如果使用之前的元素選擇器來操作的話，就會(huì)顯得非常繁瑣，所以不妨換種思路來考慮這個(gè)事情。假如需要對(duì)頁面中的<p>、<a>和<div>標(biāo)簽使用同一種文字樣式，那么可以把這三個(gè)元素看成是同一種類型樣式的元素，然后對(duì)它們進(jìn)行歸類操作。

在CSS中，使用類操作需要在元素內(nèi)部使用class屬性，而class的屬性值就是為元素定義的“類名'

【例題】使用類選擇器

01.為需要的元素添加class類名，代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.myTxt{

color:red;

font-size: 30px;

text-align: center;

}

.myA{text-decoration: none;}

</style>

</head>

<body>

<p>我是一行p標(biāo)簽文字</p>

<div>div文字也和它們的樣式相同</div>

</body>

</html>

02.

為當(dāng)前類添加樣式，代碼如下:

.myTxt{

color:red;

font-size: 30px;

text-align: center;

}

</style>

以上兩段代碼分別為需要改變樣式的元素添加class類名，為需要改變的類添加CSS樣式。這樣，就可以同時(shí)為多個(gè)不同元素添加相同的CSS樣式。這里需要注意的是，因?yàn)?lt;a>標(biāo)簽天生自帶下劃線，所以在頁面中<a>標(biāo)簽的內(nèi)容還是會(huì)有下劃線存在。如果對(duì)此很介意的話，可以單獨(dú)為<a>標(biāo)簽多添加一個(gè)類名（一個(gè)標(biāo)簽可以存在多個(gè)類名，它們之間使用空格分隔），代碼如下：

.myA{text-decoration: none;}

通過以上代碼可以實(shí)現(xiàn)取消<a>標(biāo)簽下劃線的目的，無下劃線的效果如圖所示。

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答

回復(fù)(0)

點(diǎn)擊加載更多評(píng)論>>

CSS三大基礎(chǔ)選擇器 2.類選擇器

繼續(xù)查找其他問題的答案？

最近更新

繼續(xù)查找其他問題的答案？