代码之家  ›  专栏  ›  技术社区  ›  THX-1138

是否有按类前缀的CSS选择器?

  •  144
  • THX-1138  · 技术社区  · 14 年前

    我想将CSS规则应用于其中一个类与指定前缀匹配的任何元素。

    例如,我想要一个规则,它将应用于类以开头的div status- (以下代码段中为A和C,但不是B):

    <div id='A' class='foo-class status-important bar-class'></div>
    <div id='B' class='foo-class bar-class'></div>
    <div id='C' class='foo-class status-low-priority bar-class'></div>
    

    某种组合:
    div[class|=status] div[class~=status-]

    在css2.1下是否可行?它在任何CSS规范下都是可行的吗?

    注意:我知道我可以使用jQuery来模拟它。

    4 回复  |  直到 9 年前
        1
  •  409
  •   Daniel Compton    6 年前

    这在CSS2.1中是不可行的,但是在CSS3属性子串匹配选择器中是可行的(它

    div[class^="status-"], div[class*=" status-"]
    

    请注意第二个属性选择器中的空格字符。这会起作用 div class 属性满足以下任一条件:

    • [class^="status-"]

    • [class*=" status-"] 包含直接出现在空格字符后面的子字符串“status-”。类名用空格隔开 per the HTML spec ,因此具有重要的空间特征。如果指定了多个类,则检查第一个类之后的任何其他类, 如果属性值是空格填充的(这可能发生在一些输出 属性)。

    here .

    如上所述,需要组合两个属性选择器的原因是 [class*="status-"] 将匹配以下元素,这可能是不需要的:

    <div id='D' class='foo-class foo-status-bar bar-class'></div>
    

    如果你能确保这样的场景 为了简单起见,您可以自由地使用这样的选择器。然而,上面的组合要强大得多。

    status- 加上自己的前缀 status 而不是上课 as Gumbo suggests .

        2
  •  16
  •   sheriffderek    7 年前

    CSS属性选择器将允许您检查字符串的属性(在本例中-类名)

    https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

    (看起来它实际上处于2.1和3的“推荐”状态)


    以下是我认为它是如何工作的:

    • [ ] :是复杂选择器的容器 如果你愿意。。。
    • class :“类”是 你在看这个案子。
    • * :modifier(如果有):在这种情况下-“wildcard”表示您正在查找任何匹配项。
    • test- :包含字符串“test-”的属性-的值(假设有一个值)(可以是任何值)

    [class*='test-'] {
      color: red;
    }
    

    如果你有充分的理由,你可以说得更具体一些

    ul[class*='test-'] > li { ... }

    我试过寻找边缘案例,但我认为没有必要结合使用 ^ *

    例子: http://codepen.io/sheriffderek/pen/MaaBwp

    http://caniuse.com/#feat=css-sel2

    IE6以上的一切都会欣然服从。:)

    请注意:

    [class] { ... }

    将选择任何具有类的内容。。。

        3
  •  6
  •   Gumbo    14 年前

    这在CSS选择器中是不可能的。但是你可以用两个类而不是一个。 地位 重要的 而不是 .

        4
  •  2
  •   SBUJOLD    14 年前

    attribute selector 在-sign之前完全匹配或部分匹配,但在这里不起作用,因为您有多个属性。如果要查找的类名始终是第一个,则可以执行以下操作:

    <html>
    <head>
    <title>Test Page</title>
    <style type="text/css">
    div[class|=status] { background-color:red; }
    </style>
    </head>
    <body>
    <div id='A' class='status-important bar-class'>A</div>
    <div id='B' class='bar-class'>B</div>
    <div id='C' class='status-low-priority bar-class'>C</div>
    
    </body>
    </html>