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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值