Question

img[class*="align"]在CSS中意味着什么？

我在很多样式表中都看到了这一点，但我不确定它为何被使用以及它的用途。有什么想法吗？

Answer 1

attribute selector匹配任何img标记类文本，包括“align”。例如，它将匹配以下任何一个：

<img class="dummy align test" />
<img class="test align-1" />
<img class="hello-align" />
<img class="abaligncd" />
<img class="align" />

从文档（上面链接）：

E [foo * =“bar”] - 一个E元素，其“foo”属性值包含子串“bar”

这在流行的CSS框架中用于设置多个相似类的样式，而无需为每个类添加新的相同类。例如，如果我们有以下标记：

<p class="central para-red">Hello, world!</p>
<p class="para-green bold">Hello, world!</p>
<p class="para-blue">Hello, world!</p>
<p>Hello, world!</p>

我们可以将样式应用于其类包含“para-”的所有p元素，而无需通过简单地使用手动键入所有变体：

p[class*="para-"] { ... }

以下是此版本的JSFiddle example。

Answer 2

它将匹配具有包含 img的类的所有align个元素。

规范，有关于此的更多信息：

W3 Spec on CSS selectors

什么img [class * =“align”]在CSS中意味着什么？

2 个答案: