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

【问题标题】：CSS selector to target element class or ID using only 1 statementCSS 选择器仅使用 1 个语句来定位元素类或 ID
【发布时间】：2014-06-10 17:05:43
【问题描述】：

有没有什么方法可以有效地将这样的东西写成单个语句 （这不起作用）

*[*^='head'] {}

目标：任何元素，任何属性，以'head'开头*

而不是两个陈述（这行得通）

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

目标：

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

【问题讨论】：

我不认为我们可以选择所有属性，如果它们只是class和id，当然可以只写一个规则。
我认为我们也不能，但我很好奇是否有办法。
stackoverflow.com/questions/5634278/…
Hanky，我可以在样式表中使用 xpath 表达式作为选择器吗？ //*[@*="foo"]
我认为XPath只是scripting中查询元素的一种方式，CSS中没有。

标签： css

【解决方案1】：

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'

【讨论】：

又一个不正确的答案。您的答案没有提供匹配的 ANY 属性，例如，它不会匹配 data-part=head

【解决方案2】：

没有选择器可以做到这一点，但是你可以用一堆 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

【讨论】：

有些程序员在不必要的时候不使用任何引号，比如class=short
伙计们，这只是一个例子，正则表达式可能会被每个程序员更改以根据需要使用..
@MateiMihai 您可以将正则表达式优化为=\\s*('|"|)head[^'"]*\\1，它接受单引号或双引号或两者都不接受，等号和属性值之间有一些空格。
谢谢@KingKing 我已经用你的替换了正则表达式
@MateiMihai wow，有趣的是html() 自动标准化了所有的引号（单引号转换为双引号，如果不指定，则添加双引号... )，所以你的原始代码是非常OK的。

【解决方案3】：

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 语法不允许这样做）。

【讨论】：