Question

我试图制作一个可以在Twitter对话中使用的greasemonkey用户文件并将用相同的颜色着色
每张海报的名称+用户名加上每条推文中的每个相关@reply，
为了更容易区分哪些推文回复哪一个。

我检查了上述对话的HTML代码，
CSS路径（在Chrome浏览器中，在Firefox的Inspector中称为＆＃39; unique selector）例如，第一个回复者的名字是：

#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)

所以，我的问题是：我如何使用Javascript将每个这样的特定元素应用于：{color: red;}这样的CSS属性？

Answer 1

您可以使用querySelector来获取与选择器匹配的（第一个）元素。如果它像你说的那样，是一个独特的选择器，应该就是你所需要的。否则，您可以使用querySelectorAll来获取与选择器匹配的所有项目。

当然，如果元素具有id，或者如果您知道最多只有一个链接或某个级别的div，则可以省略nth-child个添加。这些是由FireFox添加的，以使选择器真正独一无二，但如果您知道结构，则并不总是需要它们。

// Get first element matching the selector. Use querySelectorAll to get all of them.
var element = document.querySelector('#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)');

element.style.color = 'red';

但通常你不需要这样一个特定的选择器

如何使用Javascript中的CSS路径将CSS属性应用于元素？

1 个答案: