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

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