CSS3是CSS的新版本，擁有更豐富的樣式選擇器與屬性。其中新添加的屬性選擇器在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，能夠更加便捷地對(duì)元素進(jìn)行操作。

/* 1. 屬性匹配選擇器 */
/* 根據(jù)屬性名稱和屬性值進(jìn)行匹配 */
[屬性名='屬性值']{
/* 樣式代碼 */
}
/* 例子：根據(jù)alt屬性值為"logo"的圖片，設(shè)置其邊框?yàn)?px紅色實(shí)線邊框 */
img[alt='logo']{
border: 1px solid red;
}
/* 2. 屬性包含選擇器 */
/* 根據(jù)屬性名和屬性值中包含某些字符進(jìn)行匹配 */
[屬性名*='包含字符']{
/* 樣式代碼 */
}
/* 例子：匹配所有href屬性包含"html"的鏈接文字，將顏色設(shè)置為橙色 */
a[href*='html']{
color: orange;
}
/* 3. 屬性前綴選擇器 */
/* 根據(jù)屬性名以某個(gè)字符串開(kāi)頭進(jìn)行匹配 */
[屬性名^='屬性前綴']{
/* 樣式代碼 */
}
/* 例子：匹配所有name屬性以"prod"開(kāi)頭的復(fù)選框，將背景顏色設(shè)置為綠色 */
input[name^='prod'][type='checkbox']{
background-color: green;
}
/* 4. 屬性后綴選擇器 */
/* 根據(jù)屬性名以某個(gè)字符串結(jié)尾進(jìn)行匹配 */
[屬性名$='屬性后綴']{
/* 樣式代碼 */
}
/* 例子：根據(jù)alt屬性以".com"結(jié)尾的圖片，將邊框設(shè)置為5px紅色虛線 */
img[alt$='.com']{
border: 5px dashed red;
}

通過(guò)這些屬性選擇器，我們可以更加高效地對(duì)元素進(jìn)行選擇，從而讓網(wǎng)頁(yè)的樣式表現(xiàn)得更加靈活、多樣化。