Question

我希望将[attr^=val]等类选择器与attr选择器结合使用，class为[class^='test-']，如/* Works */ [class^='test-'] { background: blue; } /* Works */ .smart { background: yellow; } /* Doesn't work */ [class^='test-'].smart { background: red; }。我已经单独测试了每个选择器，它们似乎工作得很好。但是，当它们组合时，它们不能产生所需的结果。

实施例

您也可以tox configuration specification。

＆＃13;

<div class="test-me">
  <p>Should be blue.</p>
</div>
<div class="smart">
  <p>Should be yellow.</p>
</div>
<div class="smart test-me">
  <p>Should have been red, but isn't.</p>
</div>

＆＃13;

[class^='test-'].smart

＆＃13;

有人可以解释为什么CSS选择器$('.datatable'). on('preXhr.dt', function ( e, settings, data ) { if (settings.jqXHR) settings.jqXHR.abort(); }).DataTables({});不起作用，如果可能的话，如何解决问题？

Answer 1

为什么CSS选择器[class^='test-'].smart不起作用

因为您的类属性不以test-开头。它以smart开头。如果以test-开头，就像这样：

<div class="test-me smart">
  <p>Should be red.</p>
</div>

然后它匹配。

如何解决问题

当属性不以test-开头时，您需要一个额外的选择器。如上所述here：

[class^='test-'].smart, [class*=' test-'].smart {
  background: red;
}

<div class="smart test-me">
  <p>Should be red.</p>
</div>

<div class="test-me smart">
  <p>Should also be red.</p>
</div>

Answer 2

您需要以这种格式更改CSS： -

只需要改变^ by *

[class*='test-'].smart {
  background: red;
}

Answer 3

这不是您具体问题的直接答案。其他答案都很好。

但是，我不推荐这种给出具有内部结构的类名称的方法，然后必须使用属性选择器将其拆开。属性选择器使您能够查找其值以字符串（^=）开头的任何属性，包含字符串（*=），在某处包含令牌（~=）或其值是一个带前缀的字符串（^=），但是找不到一个属性，其值是一个令牌列表，其中任何一个都有一个特定的前缀，这就是你想要的。因此，正如其他答案所解释的那样，你不得不说

[class^="test-"], [class*=" test-"]

那很难看，也不是很干。另外，如果你担心性能，那么CSS引擎的工作量会更多。相比之下，CSS引擎经过高度优化，可以进行常规的类匹配。

因此，我建议您采用单独的类test和me的方法。 HTML显然看起来像<div class="test me">。 CSS将为所有测试版本的所有属性指定.test { }，为.test.me { }特定的属性指定me。

如果您担心me可能会与代码中其他位置的类似名称的类发生冲突，那么您可以将其命名为“test-me”，并将HTML指定为{{1} }，CSS为<div class="test test-me">和.test { }。

是的，这需要HTML中的更多字节。但是，在一年的时间内，甚至为一百万用户提供zippping和缓存之后下载这些内容的成本可能绝对可以忽略不计。

但事实仍然是.test-me { }比HTML中的test test-me更加冗长。但是，我认为前者最终更具可读性和语义性。考虑从现在开始一年后接管你的代码的穷人。如果他想查找正在应用于test-me的样式，他可能会在CSS中搜索test-me形式的类。他可能不会偶然发现影响此.test-me元素的其他规则[class^="test-"], [class*=" test-"]。

如果你看看Bootstrap，请注意他们不使用class="test-me"等类的属性选择器。那效率太低了。相反，在运行时应用的规则明确指出所有可能性：

col-md-3

当然，在Bootstrap的情况下，他们不会在源代码中写出所有这些类;他们使用SASS在编译时生成它们。如果您愿意使用SASS或其他预处理器，或者已经这样做，那么这也是您可以考虑的选项。

另一个有用的参考点是图标库，它允许您使用类似

的图标指定图标

.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
  float: left;
}

其中一些做使用您提议的类型的CSS规则，但他们认为只会指定一个类，因此他们只能使用一个规则

<i class="icon-cloud"></i>

这至少在性能方面不会那么糟糕。但是，其他图标库会让您明确指定另一个类本身只显示图标：

[class^="icon-"]

这允许他们将所有图标共有属性的CSS编写为

<i class="icon icon-cloud"></i>

将尽可能快地获得。

类选择器和类以选择器开头

实施例

3 个答案: