CSS选择器正则表达式实例页面

回到相关文章 »

代码：

CSS代码：

li[data-index^='t'] {
    color: #cd0000;    
}
li[data-index^='f'] {
    color: blue;    
}

li[data-index^='f' i]:after {
    content: '✓支持i正则';    
    margin-left: 30px;
    color: green;
    font-family: "Lucida Console", Monaco, monospace;
}

HTML代码：

<li data-index="one">data-index="one"</li>
<li data-index="Two">data-index="Two"</li>
<li data-index="three">data-index="three"</li>
<li data-INDEX="FOUr">data-INDEX="FOUr"</li>
<li DATA-index="five">DATA-index="five"</li>

效果：

data-index="one"
data-index="Two"
data-index="three"
data-INDEX="FOUr"
DATA-index="five"