Question

如何仅通过查询选择器在p内选择div p2和r，如果不是，我不想选择div p和p2在班级r

内

<div>
<div class="r"><div class="p"></div><div class="p2"></div></div> //want to select this , i know it can accessed with tad name div
</div>

<div class="r"><div class="p"></div><div class="p2"></div></div> // I dont want to select this if the parent div is body

CSS

.p,.p2{
height:50px;
width:50px;
background-color:orange
}

我试过的javascript，这是正确的如何实现

c = document.querySelectorAll( ' x >.r' ) // where x is the parent tag tagName of r

Answer 1

因此，根据您的要求，您只想选择第一个孩子的后代，

然后只使用:first-child选择器。

var firstChild = document.querySelector(".r:first-child");
var descendant = firstChild.querySelectorAll(".p, .p2");

Array.from(descendant).forEach(function(itm){
  itm.style.backgroundColor = "red";
});

DEMO

Answer 2

您可以使用

c = document.querySelectorAll(".r .p, .r .p2");

逗号分隔选择器，就像在CSS中一样，a b表示＆＃34; b在＆＃34;内。

Answer 3

如果您想按班级选择，那么您可以这样做：

document.querySelectorAll('div div.r .p, div div.r .p2');

请注意，这些选择器可以在任何地方使用（例如作为样式规则），不需要额外的脚本。

e.g。

window.onload = function() {
  var x = document.querySelectorAll('div div.r .p, div div.r .p2');
  console.log('Found: ' + x.length);
};

<!-- Descendants of a div -->
<div>
  <div class="r">
    <div class="p">p below div and div.r</div>
    <div class="p2">p2 below div and div.r</div>
  </div>
</div>

<!-- Descendants of body -->
<div class="r">
  <div class="p">p below body and div.r</div>
  <div class="p2">p2 below body and div.r</div>
</div>

在div中按类名选择所有div

3 个答案:

DEMO