javascript 到 css 选择器答案

【问题标题】：javascript to css selectorjavascript 到 css 选择器
【发布时间】：2018-05-08 01:04:53
【问题描述】：

我想将此 javascript 代码行转换为 CSS，我一直在搜索网站和谷歌，但没有得到直接答案。

var riskCell20 = document.getElementById("risk.probablity.literal.l100").childNodes[2];

类似

#risk.probablity.literal.l100:nth-child(2);

找不到正确的语法

【问题讨论】：

该元素是否具有完全相同的 ID（带有句点）？还是他们上课？您的 CSS 字符串实际上意味着选择一个 ID 为 risk 的元素，其类为 probability、literal、l100
我们可以假设这个元素的 childNodes 只包含元素节点吗？因为它通常在元素节点旁边包含文本节点，并且考虑到您正在使用的文档类型，这个元素很可能包含会完全脱离索引的文本节点。
应该是 nth-child(3)，因为节点从 0 开始编号。
is是整个字符串，跟java包命名一样使用
那是ibm RTC，我们无法更改

【解决方案1】：

由于id 有点，这是一个类的目标字符，你可以使用属性选择器。

[attribute="value"]

使用它，您可以定位元素的属性，例如title、href 等，在本例中为id。

堆栈 sn-p 示例

[id="risk.probablity.literal.l100"] :nth-child(2) {
  color: red;
}

<div id="risk.probablity.literal.l100">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

注意，nth-child 不是从零开始的，childNodes 是，所以如果你想要第三个孩子 (childNodes[2])，你的 nth-child 应该是 3 (nth-child(3))

【讨论】：

【解决方案2】：

由于. 字符在选择器上具有特殊含义，您可能需要对其进行转义：

#risk\.probablity\.literal\.l100:nth-child(2);

【讨论】：