正则表达式匹配属性选择器

Question

是否有可能为具有“icon-”类的任何元素创建CSS定义，然后是一组字母而不是数字。根据{{3}}文章，例如：

[class^='/icon\-([a-zA-Z]+)/'] {}

应该有效。但出于某种原因，它没有。

特别是我需要为所有元素创建样式定义，例如“icon-user”，“icon-ok”等但不是“icon-16”或“icon-32”

有可能吗？

Answer 1

CSS属性选择器不支持正则表达式。

如果您确实仔细阅读了该文章：

正则表达式匹配属性选择器

它们不存在，但不会那么酷吗？我不知道实施起来有多难，或者解析起来有多昂贵，但它不会只是炸弹吗？

注意前三个字。 它们不存在。那篇文章只不过是一篇博客文章，哀叹缺少CSS属性选择器中的正则表达式支持。

但如果您使用的是jQuery，James Padolsey's :regex selector for jQuery可能会让您感兴趣。您给定的CSS选择器可能如下所示：

$(":regex(class, ^icon\-[a-zA-Z]+)")

Answer 2

我在facebook上回答了这个，但我觉得我最好也分享一下：）

我没有对此进行过测试，所以如果不能正常工作，请不要拍我:)但我的猜测是在类名中明确地指向包含单词图标的元素，但是要指示浏览器不要包含那些包含数字的类。

示例代码：

div[class|=icon]:not(.icon-16, .icon-32, icon-64, icon-96) {.....}

参考：

属性选择器...（http://www.w3.org/TR/CSS2/selector.html#attribute-selectors）： [ATT | = VAL]

表示具有att属性的元素，其值正好是“val”或以“val”开头，后跟“ - ”（U + 002D）。

：不是选择器...... （http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/）

希望这有帮助，

瓦西姆

Answer 3

我测试了我之前的解决方案并且可以确认它不起作用（请参阅BoltClock的评论）。但是这样做：

OP：“特别需要为所有元素创建样式定义，例如”icon-user“，”icon-ok“等，但不是”icon-16“或”icon-32“ “

所需的CSS代码如下所示：

/* target every element were the class name begins with ( ^= ) "icon" but NOT those that begin with ( ^= ) "icon-16", or "icon-32" */
*[class^="icon"]:not([class^="icon-16"]):not([class^="icon-32"]) {.....}

或

/* target every element were the class name begins with ( ^= ) "icon" but NOT those that contain ( *= ) the number "16" or the number "18" */
*[class^="icon"]:not([class*="16"]):not([class*="32"]) { ...... }

测试代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{border:1px solid #999;margin-bottom:1em;height:100px;}
            *[class|=icon]:not([class|=icon-16]):not([class|=icon-32]) {background:red;color:white;}
        </style>
    </head>     
    <body>
        <div class="icon-something">
            <h4>icon-something</h4>
            <p><strong>IS</strong> targeted therfore background colour will be red</p>
        </div>
        <div class="icon-anotherthing">
            <h4>icon-anotherthing</h4>
            <p><strong>IS</strong> targeted therfore background colour will be red</p>
        </div>
        <div class="icon-16-install">
            <h4>icon-16-install</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-16-redirect">
            <h4>icon-16-redirect</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-16-login">
            <h4>icon-16-login</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-install">
            <h4>icon-32-install</h4> 
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-redirect">
            <h4>icon-32-redirect</h4> 
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
        <div class="icon-32-login">
            <h4>icon-32-login</h4>
            <p>Is <strong>NOT</strong> targeted therfore no background colour</p>
        </div>
    </body>
</html>

CSS3类匹配字母范围[a-z] +？

3 个答案:

正则表达式匹配属性选择器