这个 CSS 选择器是啥？ [类* =“跨度”]

Posted 2023-03-06

【中文标题】这个 CSS 选择器是啥？ [类* =“跨度”]

【英文标题】：What is this CSS selector? [class*="span"]这个 CSS 选择器是什么？ [类* =“跨度”]

【发布时间】：2012-04-07 19:59:38

【问题描述】：

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

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

有谁知道这种技术叫什么以及它的作用是什么？

【问题讨论】：

api.jquery.com/attribute-contains-selector

许多很酷的 CSS 选择器可用：w3.org/TR/selectors/#selectors

jsbin.com/otizoz/edit#javascript,html,live

类似但不完全重复，***.com/questions/7366323/…（链接回此处）

【参考方案1】：

它选择类名在某处包含字符串"span" 的所有元素。还有^= 用于字符串的开头，$= 用于字符串的结尾。这是一些 CSS 选择器的a good reference。

我只熟悉引导类 spanX，其中 X 是一个整数，但如果有其他选择器结束在 span 中，它也属于这些规则。

它只是有助于应用一揽子 CSS 规则。

【参考方案2】：

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

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

【讨论】：

实际上，它选择了“类中包含名称span的子元素”和不是“所有具有类show-grid的元素”

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

【参考方案3】：

以下：

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

意味着 '.show-grid' 的所有子元素以及其中包含单词 'span' 的类都将获取这些 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> 本身之外，所有元素都会被命中。

关于引导程序：

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

【参考方案4】：

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

在本例中选择<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>

良好的参考

CSS3 Attribute Selectors: Substring Matching The 30 CSS Selectors you Must Memorize W3C CSS3 Selectors

【讨论】：

我知道这是旧答案，但我会将此引用添加到参考列表中：w3.org/TR/css3-selectors

想添加另一个参考，以防人们发现这很有用：AllCssSelectors.com

div[class^="something"] "starts with" 选择器仅在元素包含一个类或多个类时才有效，前提是该类是左侧的第一个类。

我会添加 div[class~="something"] 以在空格分隔的列表（例如类）中查找匹配项，并添加 div[class|="something" 以匹配连字符分隔的列表，例如匹配上面you-are-something类名中的东西

@user3339411 该网站处于离线状态，因此我发布了一个存档版本。 archive.is/FOUHa