CSS高度样式的CSS属性选择器 [英] CSS attribute selector for CSS height style

问题描述

是

的选择器

 < tr style =height：64px> 
  

与普通CSS属性选择器相同，即 tr [style = height：64px] 或 tr [style = height：64px] 或 tr [style =height \3a 64px] ？

我可能没有正确尝试过，但上面没有一个为我工作。

UPDATE：

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

BTW，FTR，结果证明我的测试工具是问题的根源，我刚写了一个更好的工具来测试CSS选择从命令行之后。使用它，（Go）选择器应该被指定为 tr [style = height \：64px] 。

解决方案

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

如果你不想引用它，冒号使用了CSS标识符的转义机制。这就是为什么 [style = height\：64px] 工程（下面的第二个例子）。有关详细信息，请参见此问题< a>，其中此问题本质上是重复的。

[style =height\：64px]

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

[style =height&＃58; 64px ] 不起作用，因为字符引用仅在HTML中有意义。它们在CSS选择器中没有任何意义。

这些都与样式属性值是否以分号结尾无关。所以接受答案提供的描述是错误的。它只能工作，因为引号。

底线：只是包装你的属性值在引号中，不再担心它。

  function test（sel）{try {console.log（sel，yields，document.querySelector（sel））; } catch（e）{console.log（sel，failed 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>  

$ b

Would the selector for

  <tr style="height:64px">

the same as normal CSS attribute selector, i.e., tr[style="height:64px"] or tr[style=height:64px] or tr[style="height\3a 64px"]?

I may have not tried them correctly but none of above worked for me.

UPDATE:

@torazaburo I accepted @balapa's answer not because the semicolon, but because none of my attempts worked but @balapa showed me a working code. I believe without semicolon it would still work, but that's far less important to me, than to have a working code.

BTW, FTR, it turns out that my testing tool was the source of the problem, and I've just written a better tool to test CSS selection from command line after that. With it, the (Go) selector should be specified as tr[style=height\:64px].

解决方案

In spec-compliant browsers, tr[style=height:64px] throws a DOM error, saying this is an invalid selector. The version with double quotes works. This is because the spec says that the value in an attribute selector must be a CSS identifier or a string. height:64px is not an identifier, so it fails. Enclosing it in quotation marks (either single or double) makes it into a string, which works.

If you don't want to quote it, then you need to escape the colon using the escape mechanism for CSS identifiers. That is why [style=height\:64px] works (second example below). For details, see this question, of which this question is essentially a duplicate.

[style="height\:64px"] works because escaping the colon is essentially a no-op.

[style="height\3a 64px"] works as expected, with or without surrounding quotes. \3a is the CSS escape for colon, and the following space terminates the escape sequence. I don't know why this didn't work for you. If you were specifying this selector as a JavaScript string, perhaps you forgot to escape the backslash.

[style="height:64px"] does not work because character references only have meaning in HTML. They don't have any meaning in CSS selectors.

None of this has anything to do with whether the style attribute value ends in a semicolon or not. So the description provided by the accepted answer is wrong. It only works because of the quotes.

Bottom line: just wrap your attribute values in quotes and stop worrying about it.

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:64px"]');

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

这篇关于CSS高度样式的CSS属性选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！