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

Question

的选择器

  <tr style="height:64px">

与正常的 CSS 属性选择器相同，即 tr[style="height:64px"] 或 tr[style=height:64px] 或 tr[style="heighta 64px"]?

我可能没有正确尝试过它们，但上面的 none 对我有用。

更新：

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

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

Answer 1

这样做：

.trHeight { height: 64px}

和代码：

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

然后

抢

".trHeight"

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

Answer 2

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

Answer 3

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

如果你不想引用它，那么你需要使用 CSS 标识符的转义机制来转义冒号。这就是 [style=height\:64px] 起作用的原因（下面的第二个例子）。有关详细信息，请参阅 this question，此问题本质上是重复的。

[style="height\:64px"] 有效，因为转义冒号本质上是一个空操作。

[style="heighta 64px"] 按预期工作，有或没有周围的引号。 a 是冒号的 CSS 转义，后面的 space 结束转义序列。我不知道为什么这对你不起作用。如果您将此选择器指定为 JavaScript 字符串，可能是您忘记转义反斜杠。

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

其中

None与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>

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

CSS attribute selector for CSS height style

css

css-selectors

inline-styles