这个CSS选择器是什么？[class*="span"]

Question

我在Twitter Bootstrap中看到了这个选择器：

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

有人知道这种技术叫什么，以及它的作用吗？

- jon

---

http://api.jquery.com/attribute-contains-selector/ - biziclop

许多酷炫的CSS选择器可用：http://www.w3.org/TR/selectors/#selectors - Tim M.

http://jsbin.com/otizoz/edit#javascript,html,live - Roko C. Buljan

类似但不完全重复的问题，https://dev59.com/NGs05IYBdhLWcg3wPPeB（链接回到这里） - BoltClock

Answer 1

这是一个属性通配符选择器。在您提供的示例中，它查找任何子元素（包括嵌套子元素）位于.show-grid下，且具有类名中包含span的元素。

因此，它将选择此示例中的<strong>元素：

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

你还可以搜索「以...开头的」内容。

div[class^="something"] { }

这个可以用在像这样的情况中：

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

以“ends with…”结尾

div[class$="something"] { }

这将适用于

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

优秀的参考资料

• CSS3属性选择器：子字符串匹配
• 你必须记住的30个CSS选择器
• W3C CSS3选择器

- isNaN1247

---

我知道这是一个旧答案，但我会将此参考添加到参考列表中： http://www.w3.org/TR/css3-selectors/ - Dread Boy

希望能够添加另一个参考链接，以防人们发现这很有用：http://AllCssSelectors.com - user3339411

div[class^="something"] { } 这个“以某个值开头”的选择器只在元素只包含一个类时有效，或者当元素包含多个类时，该选择器也只匹配最左边的那个类。 - Nahn

我会添加 div[class~="something"] 来查找空格分隔列表（例如类）中的匹配项，以及 div[class|="something"] 用于在连字符分隔列表中进行匹配，例如在上面的 you-are-something 类名中匹配 something。 - Ruskin

@user3339411 网站已经下线，所以我正在发布存档版本。https://archive.is/FOUHa - desbest

Answer 2

.show-grid [class*="span"]

这是一个CSS选择器，它选择所有具有类show-grid的元素，并且其中包含一个类名为contains且名称为span的子元素。

- Spikeh

---

实际上，它选择的是“类名包含 span 的子元素”，而不是“所有具有 show-grid 类的元素”。 - Utopik

这不会选择具有类名“show-grid”的元素。它选择具有包含“span”的类名的那些元素的后代（而不仅仅是子元素）。这听起来可能很迂腐，但这是一个重要的逻辑区别。 - isherwood

Answer 3

以下内容：

.show-grid [class*="span"] {

意思是，所有包含单词'span'的类名的'.show-grid'下的子元素将使用这些CSS属性。

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

除了<span>元素本身，其他所有元素都被选中。

关于Bootstrap：

- span6：这是Bootstrap 2的脚手架技术，它根据12个部分将一个区域划分为水平网格。因此，span6的宽度为50%。 - 在当前版本的Bootstrap（v.3和v.4）中，您现在可以使用.col-*类（例如col-sm-6），它还指定了一个媒体断点，以处理当窗口缩小到一定大小时的响应能力。请查看Bootstrap 4.1和Bootstrap 3.3.7获取更多文档。我建议现在使用较新的Bootstrap版本。

- Tyler

Answer 4

它选择所有类名中包含字符串"span"的元素。这里还有^= 用于字符串开头，$=用于字符串结尾。这是一个很好的参考,其中包含了一些CSS选择器。

我只熟悉Bootstrap类 spanX（这里X为整数），但如果存在其他选择器以 span 结尾，则它也将遵循这些规则。

这有助于应用通用CSS规则。

- Kevin Li

Answer 5

在我的情况下，由于类名随着数字的动态变化而改变，我无法为类应用背景颜色。

例如：

问题：

body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

解决方案：

body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

参考资料：链接

- KARTHIKEYAN.A