css - CSS选择具有可变div ID的二等孩子

Question

的HTML：

<div class="test_name">
<div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing" </div>
<div id ="1evhgctrs18701vda1462185r1l_container" class="testing" </div>
</div>

CSS：

div#test_name .testing:nth-child(2) {
background:red;
}

CSS 不起作用，我无法选择那些“1evhgctrs18701vda1462185r1l_container”div id，因为它们每次都在变化。

标签： css

Answer 1

有多种方法可以定位第二个嵌套 div - 根据以下内容

• 使用 nth-child(2)
• 使用最后一个孩子
• 使用最后一个类型
• 使用子 div 元素或其类的兄弟组合器
• 使用第 n 个孩子（偶数）
• 使用 :not() 选择器

另请注意，在您的代码中 - 您没有关闭子 div，也没有在其中包含 andf 内容 - 这可能是它们不呈现的原因。

.test_name .testing:nth-child(2),
.test_name-2 .testing:last-child,
.test_name-3 div:last-of-type,
.test_name-4 .testing + .testing,
.test_name-5 .testing:nth-child(even),
.test_name-6 .testing:not(:first-child){
  background: red;
  color: white
}

<p> using nth-child(2)</p>
<div class="test_name">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>

<p> using last-child</p>
<div class="test_name-2">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>

<p> using last-of-type</p>
<div class="test_name-3">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>

<p> using sibling combinator</p>
<div class="test_name-4">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>

<p> using nth-child(even)</p>
<div class="test_name-5">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>

<p> using :not() selector</p>
<div class="test_name-6">
  <div id ="1evhgctrq1bu51qgn9v81r38fhl_container" class="testing">testing 1</div>
  <div id ="1evhgctrs18701vda1462185r1l_container" class="testing">testing 2</div>
</div>
<hr/>