Question

<html>

<body>

<div> Mango </div>
<div> Apple </div>

</body>
</html>

现在我想选择第二个div，即＆＃34; Apple＆＃34;使用CSS表示法。

我正在写这样的符号:: html > body > div[2]

Answer 1

在HTML5支持的浏览器中使用如下所示

 div:nth-child(2)
{
   background:#ff0000;
}

Answer 2

$('body div:nth-child(2)')

试试这里： http://jsfiddle.net/D6w3g/

Answer 3

使用JavaScript，不使用库，使用CSS表示法选择的唯一方法是使用document.querySelector()或document.querySelectorAll();两种方法之间的区别在于，第一个querySelector()返回单个节点，第一个元素与传入的选择器匹配，而第二个，querySelectorAll()返回一个NodeList，包含 all 与该选择器匹配的元素。

要设置元素样式，例如，使用querySelctor()：

document.querySelector('body > div:nth-child(2)').style.color = 'red';

JS Fiddle demo

使用querySelectorAll()：

再次作为示例设置元素样式

var elements = document.querySelectorAll('body > div:nth-child(2)');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = 'red';
}

JS Fiddle demo

或使用Array.prototype.forEach()：

var elements = document.querySelectorAll('body > div:nth-child(2)');

[].forEach.call(elements, function(a){
    a.style.color = 'red';
});

JS Fiddle demo

替代选择器（如果要为不} div的所有:first-child元素设置样式：

/* selects all div elements that are immediate child of the body body element and are later-siblings of the div that is the ':first-child' */ body > div:first-child ~ div

JS Fiddle demo using querySelectorAll() (with added div elements to illustrate)。 JS Fiddle demo using querySelector() (with added div elements to illustrate)

或者：

/* Selects all div elements that are the adjacent sibling of another div element, that is also an immediate child of the body element */ body > div + div

JS Fiddle demo using querySelectorAll() (with added div elements to illustrate)。 JS Fiddle demo using querySelector() (with added div elements to illustrate)

然而，使用querySelector()和querySelectorAll()的这些方法不能在低于版本9的Internet Explorer下工作（尽管IE 8“不完整”，因此可能提供充分兼容）。

参考文献：

document.querySelector() ^{compatibility}。

document.querySelectorAll() ^{compatibility}。

CSS＆＃34;＆gt;＆＃34;选择器以选择特定的div

3 个答案: