位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

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

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

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

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

【例題】使用類(lèi)選擇器

01.為需要的元素添加class類(lèi)名，代碼如下：

<!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)前類(lèi)添加樣式，代碼如下:

<style type="text/css">

.myTxt{

color:red;

font-size: 30px;

text-align: center;

}

</style>

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

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

    .myA{text-decoration: none;}

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

image.png

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

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