CSS 屬性選擇器

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

CSS屬性選擇器可以根據元素的屬性和屬性值來選擇元素。 _

屬性選擇器的語法是把需要選擇的屬性寫在—對中括號里，例如把包含標題（title)的所有元素變?yōu)榧t色，可以寫作：

*[title] {color:red;}

也可以采取與上面類似的寫法，可以只對有href屬性的錨（a元素）應用樣式：

a [bref] (color:red;)

還可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。例如，將同時有href和title屬性的HTML超鏈接的文本設置為紅色，可以這樣寫：

a[href] [title] {color:red:}

以上都是屬性選擇器的用法。也可以把以上所學的選擇器組合起來，釆用創(chuàng)造性的方法來使用這個特性。

【例題】使用屬性選擇器

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

img[alt]{

border:3px solid red;

}

img[alt="image"]{

border:3px solid blue;

}

</style>

</head>

<body>

</body>

</html>

上面這段代碼想要實現的是：所有擁有alt屬性的img標簽都有3個像素寬度的，實線類型的邊框，并且為紅色；又對alt屬性且值為image的元素重新進行樣式設置，它的邊框顏色可以有所變化，設置為了藍色。代碼運行效果如圖所示。

相關視頻回答

回復(0)