Question

有没有办法有效地将这样的内容写成单一陈述 （这不起作用）

*[*^='head'] {}

目标：任何元素，任何属性都以＆＃39; head＆＃39; *

而不是两个语句（这可行）

*[class^='head'],*[id^='head']{}

目标：

<div class="header">Hi</div>
<div id="heading">Hi</div>

Answer 1

没有选择器可以做到这一点，但是有一堆jQuery代码可以完成它：

示例：http://www.jqversion.com/#!/4FPyqGD

var elements = [];
$('div').each(function(){
    var s = $(this).clone().wrap('<div>').parent().html();
    var pattern = new RegExp('="head.*"');
    if (pattern.test(s)) {
        elements.push($(this));
    }
});
console.log(elements);

使用@KingKing正则表达式的示例：http://www.jqversion.com/#!/4FPyqGD/1

Answer 2

CSS spec要求在attrib

中设置属性名称

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

查看匹配的IDENT，如下所示：

ident     [-]?{nmstart}{nmchar}*
nmstart   [_a-z]|{nonascii}|{escape}
nonascii  [^\0-\177]
escape    {unicode}|\\[^\n\r\f0-9a-f]
unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
nmchar    [_a-z0-9-]|{nonascii}|{escape}

所以必须设置属性名称。它不能是空的或星号（虽然它的命名空间可以）。

总结：你不能匹配任何属性（至少CSS语法不允许）。

Answer 3

You can try this

div[class^="head"]   - for classes starting with 'head',   
div[class*="head"]   - for classes having with 'head' anywhere in class name ,  
div[class$="head"]   - for classes ends with 'head'

仅使用1个语句来定位元素类或ID的CSS选择器

3 个答案: