多个匹配的子串选择器

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 -->