CSS属性选择器对CSS样式高度

将在选择的CSS属性选择器对CSS样式高度

<tr style="height:64px">

一样正常的CSS属性选择，即tr[style="height:64px"]或tr[style=height:64px]或tr[style="height\3a 64px"]？

我可能没有正确地尝试过，但以上都没有为我工作。

UPDATE：

@torazaburo我接受了@ balapa的答案不是因为分号，但因为没有我尝试的工作，但@balapa给我一个工作代码。我相信，如果没有分号，它仍然可以工作，但对我来说，这远没有工作代码那么重要。

顺便说一句，FTR，事实证明，我的测试工具是问题的根源，之后我刚刚写了a better tool to test CSS selection from command line。有了它，（Go）选择器应该被指定为tr[style=height\:64px]。

来源

2016-12-11 xpt

在符合规范的浏览器，tr[style=height:64px]抛出一个DOM错误，说这是一个无效的选择。带双引号的版本起作用。这是因为spec表示属性选择器中的值必须是CSS标识符或字符串。 height:64px不是一个标识符，所以它失败。用引号括起来（单或双）使它成为一个字符串，它可以工作。

如果您不想引用它，那么您需要使用CSS标识符的转义机制来转义冒号。这就是为什么[style=height\:64px]有效（下面的第二个例子）。有关详细信息，请参见this question，其中该问题基本上是重复的。

[style="height\:64px"]的工作原理是因为转义冒号本质上是一个空操作。

[style="height\3a 64px"]按预期工作，有或没有周边报价。 \3a是冒号的CSS转义，下面的空格终止转义序列。我不知道为什么这不适合你。如果您将此选择器指定为JavaScript字符串，那么您可能忘了避开反斜线。

[style="height:64px"]不起作用，因为字符引用只在HTML中有含义。它们在CSS选择器中没有任何意义。

这和style属性值是否以分号结尾都没有关系。所以接受的答案提供的描述是错误的。它仅适用于引号。

底线：将您的属性值包含在引号中，不再担心它。

function test(sel) { 
 
    try { 
 
    console.log(sel, "yields", document.querySelector(sel)); 
 
    } catch (e) { 
 
    console.log(sel, "fails with error", e.name); 
 
    } 
 
} 
 

 
test('tr[style=height:64px]'); 
 
test('tr[style=height\\:64px]'); 
 
test('tr[style="height:64px"]'); 
 
test('tr[style="height\\:64px"]'); 
 
test('tr[style="height\\3a 64px"]');  
 
test('tr[style=height\\3a 64px]'); 
 
test('tr[style="height&#58;64px"]');

<table> 
 
    <tr style="height:64px"></tr> 
 
</table>

来源

2016-12-14 06:31:02

字符引用只在HTML中有含义。他们在CSS中没有任何意义。因此，选择器正在寻找一个属性，它的值的字面意思是'height : 64px'，除了HTML中反映的是'height：64px'。为了匹配，HTML必须是''（注意编码＆ - 没有它，你有''tr style =“height : 64px”>'这是相当于'，这个转换只能在HTML中使用）。 – BoltClock

我试着用一个名为'xidel'的命令行工具，我可以很好的解决每一个可能的解决方案，但显然它是'xidel'的限制，它只是无法处理它。这就是为什么我写了一个[更好的工具来测试命令行中的CSS选择]（https://github.com/suntong/cascadia）后缀。感谢您的全面解释！ – xpt

做到这一点：

.trHeight { height: 64px}

和代码：

<tr class='trHeight"></tr>

，并使用样式属性由

".trHeight"

抓住它是一种危险的做法 CSS selector by inline style attribute

来源

2016-12-11 05:39:58 Bindrid

对不起@Bindrid，我没有说清楚 - 我需要拿出一个CSS选择''对于选择/报废目的。也就是说，html字符串''来自我废弃的网站，我无法控制。 – xpt

您需要在HTML代码和CSS代码上的末尾代码中添加分号。看看下面的例子

tr[style="height:64px;"] { 
 
background: red; 
 
}

<table> 
 
    <tr> 
 
    <td>Regular TR</td> 
 
    </tr> 
 
    <tr style="height:64px;"> 
 
    <td>TR with inline style</td> 
 
    </tr>

来源

2016-12-11 05:51:40 balapa

CSS属性选择器对CSS样式高度

回答

相关问题