在CSS中img [class * =“align”]是什么意思？ [英] What does img[class*="align"] mean in CSS?

问题描述

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 包括对齐的标签类文本。例如，它会匹配以下任何一个：

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

从以上链接的文档：

E [foo * =bar] - 其foo属性值包含子字符串bar的E元素

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>

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

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-"] { ... }

a href =http://jsfiddle.net/hKG82/ =noreferrer> JSFiddle示例在使用中。

Here is a JSFiddle example of this in use.

这篇关于在CSS中img [class * =“align”]是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！