1. 属性选择器
例1：直接写属性
<body>
<button>按钮</button>
<button>按钮</button>
<!-- 以下两个按钮禁用 -->
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
</body>button {
cursor: pointer;
}
/* 属性选择器的使用方法 */
/* 这种方法不需要重新起类名 */
/* 选择的是既有button,又有disabled这个属性的元素 */
/* 类选择器、属性选择器、伪类选择器、权重为10 */
/*直接写属性*/
button[disabled] {
cursor: default;
}例2：属性等于值的方法
<body>
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
</body><style>
/*属性等于值的方法*/
input[type="search"] {
color: pink;
}
</style>例3：
<body>
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon1">图标1</div>
<div class="icon1">图标1</div>
<div class="iicon4">图标4</div>
<div class="absiicon">图标5</div>
</body><style>
/* 以某个值开头的属性值 */
div[class^="icon"] {
color: red;
}
/* 以某个值结尾的属性值 */
div[class$="icon"] {
color: green;
}
/* 含有某个值的属性值 */
div[class*="icon"] {
color: blue;
}
</style>