CSS三大基礎選擇器 2.類選擇器

提問人：劉團圓發(fā)布時間：2020-11-17

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

在CSS中，使用類操作需要在元素內部使用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標簽文字</p>

<p><a class="myTxt myA" href="#">我是a標簽內部的文字</a></p>

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

</body>

</html>

02.

為當前類添加樣式，代碼如下:

.myTxt{

color:red;

font-size: 30px;

text-align: center;

}

</style>

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

.myA{text-decoration: none;}

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

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

相關視頻回答

回復(0)

點擊加載更多評論>>

CSS三大基礎選擇器 2.類選擇器

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

最近更新

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