Question

我现在正在浏览别人的CSS代码，发现了一些我以前从未见过的东西，也无法在W3C学校找到关于这些类型的选择器的任何内容。如果我输入“class ^ =”

，Google也不会返回任何内容

  [class^='icon-'], [class*=' icon-'] { display:inline-block; background:url(../images/sprite.png) no-repeat 0 0; border:none; text-align:center; vertical-align:middle; *display:inline; *zoom:1; }

如果有人能对此有所了解，会不会感激呢？

Answer 1

这里有一点全面介绍：

http://reference.sitepoint.com/css/css3attributeselectors

快速摘要：

[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah')
[class$='-icon'] - classes ending with '-icon'   (eg. class='blah blah-icon')
[class*='icon']  - classes containing 'icon'     (eg. class='blah xxx-icon-blah')

值得注意的是，这是一个完整的字符串匹配模式不是部分匹配模式。例如，类：

<div class='mystyle-type'/>

将匹配选择器[class ^ ='mystyle']但类：

<div class='active mystyle-type'/>

不匹配，因为字符串'active mystyle-type'不以'mystyle'开头。

使用javascript动态添加类，如jquery的'addClass'，这可能会有问题。

Answer 2

[key ^ ='starts_with']将查找具有'key'属性的元素，其值以'starts_with'开头。有关详细信息，请参阅CSS3选择器。

示例：

<div key='starts_with_bacon'>this will be selected with [key^='starts_with']</div>

Answer 3

[class^='icon-'], [class*=' icon-']

你可以用它做两件事 1.定义一个像

这样的css属性

.icon-otherClass {
/*
*CSS Property
*/

}

表示.icon-otherClass还包含已在[class ^ ='icon-'] {/ css property /}

中定义的属性

像<div class="icon-otherProperty"> </div> <i data-time-icon="icon-otherPropery" data-date-icon="icon-otherPropery"> </i>

奇怪的CSS语法。 [class ^ ='icon-']，[class * ='icon-']

3 个答案: