CSS ">" 選擇器來選擇特定的 div

Question

<html>

<body>

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

</body>
</html>

現在我想使用 CSS 表示法選擇第二個 div，即“Apple”。

我正在寫這樣的符號:: 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，其中包含與該選擇器匹配的所有元素選擇器。

樣式元素，例如，使用querySelctor() ：

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

JS小提琴演示。

再以樣式元素為例，使用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小提琴演示。

或者使用Array.prototype.forEach() ：

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

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

JS小提琴演示。

替代選擇器（如果你想為所有不是:first-child div元素設置樣式：

/* 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

使用querySelectorAll() JS Fiddle 演示（添加了div元素來說明）。 使用querySelector() JS Fiddle 演示（添加了div元素來說明）。

或者：

/* 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

使用querySelectorAll() JS Fiddle 演示（添加了div元素來說明）。 使用querySelector() JS Fiddle 演示（添加了div元素來說明）。

然而，這些使用querySelector()和querySelectorAll()在低於版本 9 的 Internet Explorer 下不起作用（盡管 IE 8 是“不完整的”，因此可能提供足夠的兼容性）。

參考：

document.querySelector()^兼容性。
document.querySelectorAll()^兼容性。

CSS ">" 選擇器來選擇特定的 div

問題描述

3 個解決方案

解決方案1
1 2014-04-15 08:05:15

解決方案2
0 2014-04-15 06:53:48

解決方案3
0 2014-04-26 21:35:11

CSS &quot;&gt;&quot; 選擇器來選擇特定的 div

問題描述

3 個解決方案

解決方案1 1 2014-04-15 08:05:15

解決方案2 0 2014-04-15 06:53:48

解決方案3 0 2014-04-26 21:35:11

CSS ">" 選擇器來選擇特定的 div

解決方案1
1 2014-04-15 08:05:15

解決方案2
0 2014-04-15 06:53:48

解決方案3
0 2014-04-26 21:35:11