CSS3属性选择器
1.属性选择器的权重要高于标签选择器,比如这里的button[disabled]
的权重要高于单独的button
,选择button[disabled]
的是:既有button
,又有disabled
这个属性的元素,举例如下:
这里是以 <button>按钮</button>
生成一个按钮作为研究对象
button[disabled] {
cursor: default;
}
2.只对属性等于某个值的部分起作用,举例如下:
input[type="search"] {
color: tomato;
}
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
经过属性选择器的处理后,以上的六个复选框中只有后三个的颜色会变成tomato颜色
3.只对属性以某个值开头的部分起作用(例如这里就是只对以icon
开头的部分起作用)
div[class^="icon"] {
color: red;
}
<div class="icon1">按钮1</div>
<div class="icon2">按钮2</div>
<div class="icon3">按钮3</div>
<div class="aicon">按钮4</div>
<div class="bicon">按钮5</div>
<div class="xicony">按钮6</div>
经过属性选择器的处理后,以上的6个按钮中只有前三个的颜色会变成red颜色
4.只对属性以某个值结尾的部分起作用(例如这里就是只对以icon
结尾的部分起作用)
div[class$="icon"] {
color: green;
}
<div class="icon1">按钮1</div>
<div class="icon2">按钮2</div>
<div class="icon3">按钮3</div>
<div class="aicon">按钮4</div>
<div class="bicon">按钮5</div>
<div class="xicony">按钮6</div>
经过属性选择器的处理后,以上的6个按钮中只有按钮4、按钮5的颜色会变成green颜色
5.只对属性中包含某个值(在任意位置)的部分起作用(例如这里就是只对属性中包含icon
的部分起作用)
div[class*="icon"] {
color: blue;
}
<div class="icon1">按钮1</div>
<div class="icon2">按钮2</div>
<div class="icon3">按钮3</div>
<div class="aicon">按钮4</div>
<div class="bicon">按钮5</div>
<div class="xicony">按钮6</div>
经过属性选择器的处理后,以上的6个按钮中只所有按钮的颜色都会变成blue颜色
备注:
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
在以上4个按钮中"disabled"
是表示禁用那个的按钮