CSS高度样式的CSS属性选择器[重复]

Question

选择器是否适合

  <tr style="height:64px">

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

我可能没有正确尝试过它们，但以上方法都不适合我。

更新：

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

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

Answer 1

在符合规范的浏览器中，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 选择器中没有任何意义。

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

底线：只需将您的属性值用引号括起来，就不用担心了。

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>

Answer 2

这样做：

.trHeight { height: 64px} 

和代码：

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

然后抓住它

".trHeight"

使用样式属性是一种危险的做法 CSS selector by inline style attribute

Answer 3

您需要在 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>