問題描述
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.
這篇關于CSS 中的 img[class*=“align"] 是什么意思?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!