问

奇怪的CSS语法.[class ^ ='icon-'],[class*='icon-']

是的范德萨发布于 2023-02-13 14:50

我现在正在浏览别人的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; }

如果有人能对此有所了解,我将不胜感激？

2 个回答

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

例:
```
<div key='starts_with_bacon'>this will be selected with [key^='starts_with']</div>
```
2023-02-13 14:51 回答

瓜瓜哥哥
这里有一点全面介绍:

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'/>
```
将不匹配,因为字符串"主动myStyle的型"不"myStyle的"启动.

使用javascript动态添加类,如jquery的'addClass',这可能会有问题.
2023-02-13 14:52 回答

一巴掌呼死你

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签