多个匹配的子串选择器

Question

我正在尝试创建一个规则来匹配所有以类为开头icon-的btn类.[class^="icon-"] {匹配第一个条件,但如何添加"也有.btn类？

Answer 1

这有效:

.btn[class*="icon-"]

所以将,

[class*="icon-"][class~="btn"]

看看我的小提琴:http://jsfiddle.net/VaACP/1/

Answer 2

寻找icon-起点

您可以尝试以下操作 - 图标类需要在属性中排在第一位：

[class^='icon-'].btn

到这个 HTML

<div class="icon-1 btn">Foo</div>  <!-- Matched -->
<div class="icon-2 btn">Bar</div>  <!-- Matched -->
<div class="btn icon-3">Fizz</div> <!-- Not Matched -->
<div class="icon btn">Buzz</div>   <!-- Not Matched -->

icon-在内部寻找（注意！）

您可以修改查询以基于子字符串进行类搜索：

[class*='icon-'].btn

但请注意，对于类似于 icon-、 像myicon-1或 的类，这将变得积极noicon-2。

icon-在任何地方寻找

如果您不确定icon-该类将出现在属性中的什么位置，您可以查找这两个示例：

[class^='icon-'].btn, [class*=' icon-'].btn

这将icon-在开头或其中的任何位置（以空格开头）找到类。

<div class="icon-1 btn">Foo</div>  <!-- Matched -->
<div class="icon-2 btn">Bar</div>  <!-- Matched -->
<div class="btn icon-3">Fizz</div> <!-- Matched -->
<div class="icon btn">Buzz</div>   <!-- Not Matched -->