【前端初学者】【CSS笔记】属性选择器实例

[attribute]                       选择具有attribute属性的元素
[attribute="value"]          选择attribute属性值为value的元素
[attribute^="value"]        选择attribute属性值以value开头的元素
[attribute$="value"]        选择attribute属性值以value结尾的元素
[attribute*="value"]         选择attribute属性值包含value的元素

初始:

html文件内容:

<a href="https://www.baidu.com/" target="_blank" title="baidu">百度</a>
<a href="https://www.sina.com.cn/" target="_blank">新浪</a>
<a href="https://www.163.com/" target="_self">网易</a>
<a>空</a>

 css文件内容:

a {
    color: black;
    text-decoration: none;
    margin-left: 20px;
}

一、选择具有attribute属性的元素[attribute] 

给所有具有 href 属性的元素设置红色字体

/* 选择具有href属性的元素 */
[href] {
    color: red;
}

二、选择attribute属性值为value的元素[attribute="value"]

给所有 target 属性值为 _blank 的元素设置蓝色字体

/* 选中 target属性值为 _blank 的元素*/
[target="_blank"] {
    color: blue;
}

三、选择attribute属性值以value开头的元素[attribute^="value"]

 给所有 target 属性值以 _ 开头的元素设置紫色字体

/* 选中 target属性值以 _ 开头的元素*/
[target^="_"] {
    color: purple;
}

 四、选择attribute属性值以value结尾的元素[attribute$="value"]

 给所有 target 属性值以 k 结尾的元素设置粉色字体

/* 选中 target属性值以 k 结尾的元素*/
[target$="k"] {
    color: pink;
}

五、选择attribute属性值包含value的元素[attribute*="value"]

 给所有 target 属性值包含 l 的元素设置绿色字体

/* 选中 target属性值包含 l 的元素*/
[target*="l"] {
    color: green;
}

 六、注意

属性选择框可以单独使用,也可以与其他选择器组合;

如果与其他选择器交集组合,属性选择器需要在后面。

例如:

<div class="div1" title="box">我是div</div>
<p title="para">我是p</p>

给 div1 的 title 属性值为 box 的元素设置红色字体

/* 选中 div1 中的 title 属性值为 box 的元素*/
.div1[title="box"] {
    color: red;
}

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值