我在Twitter Bootstrap中看到了这个 Select 器:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

有人知道这项技术叫什么,它的作用是什么吗?

推荐答案

这是一个属性通配符 Select 器.在您给出的示例中,它查找.show-grid以下的所有子元素,这些子元素的类包含span.

因此,在本例中 Select <strong>元素:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

你也可以搜索"开始于…"

div[class^="something"] { }

这会对这样的事情起作用:-

<div class="something-else-class"></div>

并且"以……结尾."

div[class$="something"] { }

哪一个会有用

<div class="you-are-something"></div>

Good references

Css相关问答推荐

容器内的中心固定元件

添加Angular 17的Stackblitz项目的Angular material 主题?

Css扩展搜索栏,如何添加图标结束?

如何在JavaFX中设置分隔符的样式?

实现前景渐变到背景的平滑混合

使用间距时奇怪的MUI网格行为

Css模糊了Chrome中的框边框

Astro网站在使用Astro Build构建后无法正常工作

如何使用DirectusImage标签作为背景?

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • Vue.js 变量中的动态类变量

    使用 CSS 填充悬停过渡的闪烁文本问题

    创建一条淡出/在各个方向变得透明的线

    使用之前和之后为锚标签添加画笔描边效果

    页脚上方的图像分隔线使用 ::before 伪元素

    基于内容显示(show)/隐藏(hide)同级div

    使用 CSS 强制侧边栏高度 100%(带有粘性底部图像)?

    范围内的 CSS 未在组件中应用

    对象拟合不影响图像