位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

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>

<meta charset="UTF-8">

<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>

<p><a class="myTxt myA" href="#">我是a標(biāo)簽內(nèi)部的文字</a></p>

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

</body>

</html>

02.

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

<style type="text/css">

.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è)類名,它們之間使用空格分隔),代碼如下:

    <p class="myTxt"><a class="myTxt myA" href="#"〉我是a標(biāo)簽內(nèi)部的文字</a></p>

    .myA{text-decoration: none;}

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

image.png

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

相關(guān)視頻回答
回復(fù)(0)
返回頂部