css属性选择器诸如Class^=,Class*= ,Class$=释义

最新推荐文章于 2024-08-21 11:50:22 发布

weixin_30726161

最新推荐文章于 2024-08-21 11:50:22 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kangby/p/6530416.html

本文详细介绍了CSS中的属性选择器，包括以特定值开头([attr^=value])、包含特定值([attr*=value])等的选择器，并通过实例展示了如何使用这些选择器来定位带有特定属性值的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Bootstrap的css中看到如下选择器代码：

.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

仔细查了下含义以及相关使用，记录如下。

1.选择其中的value值也可以加引号

选择器	描述
[attr]	用于选取带有指定属性的元素
[attr=value]	用于选取带有指定属性和值的元素
[attr~=value]	用于选取属性值中包含指定词汇的元素
[attr\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attr^=value]	匹配属性值以指定值开头的每个元素。
[attr$=value]	匹配属性值以指定值结尾的每个元素。
[attr*=value]	匹配属性值中包含指定值的每个元素。