9

我在 css 中找到了这些符号：

.nav li ul li a [class*="icol-"] { opacity: 0.5; filter: alpha(opacity=50); padding-top: 4px; }

.secNav .chzn-container { width: 100%!important; max-width: 100%; }

*前面的=符号是什么意思？使用!符号时是注释吗？

4

5 回答 5

13 
element[attribute*="includesthis"]

换句话说：

<a class="someclassicol-hello">Click me and win a free monkey</a>

被匹配

a[class*="icol-"]

如果字符串出现在属性中的任何位置，则为匹配。

也有^=for begin with 和$=for ends with。在此处阅读更多信息。

!important强制规则相互覆盖，否则它们不会。

a { color: red !important }
a.blue { color: blue }

<a class="blue">I'm actually red, because the less specific rule is !important</a>

在此处阅读更多信息。尤其是这一点：

什么时候应该!important使用？

与任何技术一样，根据情况有利有弊。那么什么时候应该使用它，如果有的话？这是我对潜在有效用途的主观概述。

绝不

!important除非在用尽所有其他途径后绝对必要，否则不应使用声明。如果你使用 !important 是出于懒惰、避免正确调试或匆忙完成项目，那么你就是在滥用它，你（或继承你项目的人）将遭受后果。

于 2012-11-23T08:47:11.003 回答
9

!是!important;的一部分 这不是评论。!important强制规则始终被应用。它通常用于覆盖或防止您的样式被覆盖。

意思是“*=包含”。所以在这个例子中，第一行是寻找类名.nav li ul li a包含“icol-”的元素的所有子元素。

于 2012-11-23T08:46:35.577 回答
2

*=是一个属性选择器，见CSS3 规范

!important意味着，该规则被样式的作者认为是重要的，不应被覆盖，请参阅例如CSS2以获得深入的解释。

于 2012-11-23T08:52:44.337 回答
2

来自W3 推荐：

[att*=val]

表示具有 att 属性的元素，其值包含至少一个子字符串“val”的实例。如果 "val" 是空字符串，则选择器不代表任何内容。

因此，在您的情况下，它将匹配icol-其类属性中具有的任何元素（的子元素.nav li ul li a）。

于 2012-11-23T08:50:38.403 回答
2

~不要与仅与它周围的空白匹配的哪个相混淆。

[class*="foo"] /* 'fooA bar' */

将匹配包含foo（周围有或没有空格）的类

[class~="foo"] /* 'foo bar' */

将匹配foo仅包含其周围空间的类

还有：

[class^="foo"] // begins with foo ('fooABC')
[class$="foo"] // ends with foo ('ABCfoo')
[class|="foo"] // begins with foo and is separated by a dash ('foo-bar')

更多细节在这里：复杂选择器

于 2016-11-29T20:21:22.160 回答