问题描述
img[class*="align"] 在 CSS 中是什么意思?
What does img[class*="align"] mean in CSS?
我在许多样式表中都看到了这一点,但我不确定为什么要使用它以及它的作用.有什么想法吗?
I have seen this in many stylesheets, but I'm not sure why it's used and what it does. Any idea?
推荐答案
这是一个属性选择器 匹配任何 img 标记类文本,包括align".例如,它将匹配以下任何一项:
It's an attribute selector which matches any img tag class text including "align". For instance, it would match any of the following:
<img class="dummy align test" /> <img class="test align-1" /> <img class="hello-align" /> <img class="abaligncd" /> <img class="align" />
来自文档(上面链接):
From the documentation (linked above):
E[foo*="bar"] - 一个 E 元素,其 "foo" 属性值包含子字符串 "bar"
E[foo*="bar"] - an E element whose "foo" attribute value contains the substring "bar"
这在流行的 CSS 框架中用于设置多个相似类的样式,而不必为每个类添加一个新的相同类.例如,如果我们有以下标记:
This is used in popular CSS frameworks to style multiple similar classes without having to add a new identical class to each. For instance, if we had the following markup:
<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 元素,而无需手动键入所有变体,只需使用:
We could apply styling to all of the p elements whose class contains "para-" without having to manually type all the variations by simply using:
p[class*="para-"] { ... }
这是一个 JSFiddle 示例,它正在使用中.
Here is a JSFiddle example of this in use.