document.querySelectorAll('body[direction= "rtl" ] td') 返回空列表,但 direction:rtl 是通过样式标签设置的



我正在尝试识别页面是使用方向rtl还是ltr,我正在通过样式标记(使用模板引擎中的条件服务器端(设置属性

示例https://jsfiddle.net/ud2f6hre/3/

<body>
</body>
<style>
body {
direction:rtl;
}
body[direction="rtl"] td{
color:blue;
}
td {
color:green;
}
</style>
<table>
<tr>
<td>ABC</td>
<td>ABCDEF</td>
</tr>
</table>
<input type="button" onclick="test()" value="Test"/>
<script>
function test(){
console.log(document.querySelectorAll('body[direction="rtl"] td'))
}
</script>

为什么document.querySelectorAll('body[direction="rtl"] td')重新调整一个空的NodeList?

同样,你可以看到第二个css选择器没有将颜色更改为蓝色

属性选择器根据元素的属性而不是应用于它们的样式来选择元素。

HTML中没有<body direction="rtl">。选择器不匹配。

类似的限制适用于:dir()伪类:

:dir((伪类只使用方向性的语义值,即在文档本身中定义的值。它不考虑样式的方向性,即由CSS属性(如direction(设置的方向性。

最新更新