等号前的星号(*=)是什么意思?感叹号怎么样

  • 本文关键字:是什么 感叹 怎么样 css
  • 更新时间 :
  • 英文 :


我在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%; }

=符号之前的*是什么意思?使用!符号时是否有注释?

element[attribute*="includesthis"]

换句话说:

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

由匹配

a[class*="icol-"]

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

还有^=表示以开头,$=表示以结尾。点击此处了解更多信息。


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

*=的意思是"包含"。因此,在本例中,第一行查找类名包含"icol-"的.nav li ul li a元素的所有子元素。

来自W3建议:

[att*=val]

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

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

*=是一个属性选择器,请参阅CSS3规范

!important的意思是,样式的作者认为该规则很重要,不应重写,请参阅例如CSS2以获得深入解释。

不要与~混淆,后者只与周围的空白匹配。

[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')

更多详细信息请点击此处:复杂选择器

最新更新