html - CSS 中的 img[class*="align"] 是什么意思？

Question

img[class*="align"]在 CSS中是什么意思？

我在许多样式表中都看到了这一点，但我不确定为什么要使用它以及它的作用。任何想法？

Answer 1

它是一个属性选择器，可以匹配任何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>

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

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

这是一个使用中的JSFiddle 示例。

Answer 2

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

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

关于 CSS 选择器的 W3 规范