css - 多个匹配的子串选择器

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