1

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

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

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

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

有可能吗？

4

3 回答 3

4

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

如果你真的仔细阅读那篇文章：

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

它们不存在，但这不是很酷吗？我不知道实现起来有多难，或者解析起来有多昂贵，但它不就是炸弹吗？

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

但如果您使用 jQuery，James Padolsey 的:regexjQuery 选择器可能会让您感兴趣。例如，您给定的 CSS 选择器可能如下所示：

$(":regex(class, ^icon\-[a-zA-Z]+)")
于 2012-05-14T09:25:18.247 回答
0

我在 facebook 上回答了这个问题，但我认为我最好也在这里分享:)

我还没有测试过，所以如果它不起作用，请不要开枪:) 但我的猜测是明确定位类名中包含单词 icon 的元素，但指示浏览器不要包含那些包含数字的类.

示例代码：

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/）

希望这可以帮助，

瓦西姆

于 2012-05-14T15:41:44.123 回答
0

我测试了我以前的解决方案，可以确认它不起作用（请参阅 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>
于 2012-05-14T16:21:37.450 回答