CSS3属性选择器

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" 是表示禁用那个的按钮