-1

如果我有一个 CSS 定义为；

.grid .data table tr.selected td [class^="icon-"], .grid .data table tr.selected td [class*=" icon-"] {
    background-image: url("../img/css-sprites.png");
}

它究竟是如何工作的？我的意思是如果满足条件（tr 具有选定的类，并且它有一个子 td，它的任何子元素的类包含名称为“icon-”）

我的问题是“到”背景图像将应用于哪个元素？

4

4 回答 4

2

css 规则应用于与选择器匹配的每个元素。因此，每个具有以指定父级开头icon-并以指定父级开头的类名的元素都将获得该背景图像。

另外，请注意有两条规则，用逗号分隔：

.grid .data table tr.selected td [class^="icon-"],
.grid .data table tr.selected td [class*=" icon-"]

多个选择器意味着一个或另一个需要匹配以应用规则。

属性匹配选择器的^=意思是“开始于”。*=意思是“包含”。请点击第一条评论的链接以获取有关该特定类型选择器的更多信息：按类前缀的 css 选择器（感谢 BoltClock）。

这也是一本好书：CSS 属性选择器上的 Skinny

于 2013-07-15T07:23:26.520 回答
0

什么时候将背景图像应用于所有

当我们使用,(commas) 来指定选择器时，我们说...this, this and this would have the same style或者换句话说，这些逗号分隔的元素都将具有相同的指定样式，因此该样式将应用于每个元素。

Wehn 会将背景图像应用于一个元素

由于您问题中的代码在元素之间没有逗号，因此您不断地定义彼此的子元素，因此您指定的最后一个子元素是td[class*='icon-]所有包含icon-字母的类的 tds 都会将样式应用于它们。

于 2013-07-15T07:31:45.840 回答
0

"^="

在这种情况下，它是将样式应用于具有class起点icon-且是child子td元素的元素<tr class="selected">

"*="

在逗号之后，该"*="部分定义了包含"icon-"在其中child的任何类，td以及您各自的树适用于该样式

于 2013-07-15T07:39:06.880 回答
0

每个选择器中的最后一个元素将接收背景 url[class*=" icon-"]和[class^="icon-"]

于 2013-07-15T07:23:12.193 回答