属性选择器(Attribute Selectors)是 CSS 中一种强大的选择器,允许你根据HTML元素的属性及其对应的属性值来选择元素。属性选择器可以根据元素的属性存在与否、属性值完全匹配、属性值包含特定字符串等条件进行选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 属性选择器:是 html5 中功能 */
/* 类型为 text 的 input 输入框,使用此样式 */
input[type=text]{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
/* 类型为 text 的 input 输入框,获取到焦点后,改变边框和背景色样式 */
input[type=text]:focus {
border: 3px solid #555;
background-color: lightblue;
}
/* 是 a 标签,且里面存在 id 属性,就会被修饰 */
a[id]{
background: red;
}
/* 是 a 标签,且里面存在 id 属性,且 id 属性的值等于 first,就会被修饰 */
a[id=first]{
background: red;
}
/* 是 a 标签,且里面存在 class 属性,就会被修饰 */
a[class]{
background: red;
}
/* 是 a 标签,且里面存在 class 属性,且 class 属性的值等于 link,就会被修饰 */
a[class=link]{
background: red;
}
/* 是 a 标签,且里面存在 class 属性,且 class 属性的值包含 link,就会被修饰 */
a[class*=link]{
background: red;
}
/* 是 a 标签,且里面存在 class 属性,且 class 属性的值以 link 开头,就会被修饰 */
a[class^=link]{
background: red;
}
/* 是 a 标签,且里面存在 href 属性,且 href 属性的值以 http 开头,就会被修饰 */
a[href^=http]{
background: red;
}
/* 是 a 标签,且里面存在 href 属性,且 href 属性的值以 com 结尾,就会被修饰 */
a[href$=com]{
background: red;
}
</style>
</head>
<body>
</body>
</html>