CSS中'^'符号的含义是什么？结合Bootstrap代码实例问询

嘿，这个问题问得很到位！你在Bootstrap代码里看到的[class^=border]，是CSS属性选择器的一种用法，其中的^符号专门用来匹配「属性值以指定字符串开头」的元素。

具体来说，[class^=border]会选中所有class属性的完整值以border开头的元素。举个例子：

• <div class="border"> 会被匹配
• <div class="border-top"> 会被匹配
• 甚至 <div class="border-primary mb-2"> 也会被匹配（因为它的class属性值整体是"border-primary mb-2"，开头就是border）
  但如果是 <div class="mb-2 border-top"> 就不会被选中，因为它的class属性值开头是mb-2，不符合「以border开头」的规则。

再看你贴的这段Bootstrap代码：

.bd-example-border-utils [class^=border] {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: .25rem;
  background-color: #f5f5f5;
}

它的作用很明确：给.bd-example-border-utils这个容器下所有class以border开头的元素设置统一的示例样式——把它们变成一个个灰色方块，方便展示Bootstrap各种边框工具类（比如border-top、border-left这些）的效果。

顺便给你补充几个类似的CSS属性选择器，方便你举一反三：

• [attr$=value]：匹配属性值以指定字符串结尾的元素，比如[class$="-primary"]会选中class以-primary结尾的元素
• [attr*=value]：匹配属性值包含指定字符串的元素，不管位置在哪里
• [attr~=value]：匹配属性值中包含指定完整单词的元素（比如class列表里的某个独立class）

内容的提问来源于stack exchange，提问作者Jecy