html - 选择特定类别中的所有标签

Question

如何使用 css 选择具有 class = class1

的 div 中的所有标签

假设我有这个结构(只是一个例子):

 <div class="class1"> 
         <div> <a>should be selected</a> </div>
         <p><span> <a>should be selected</a> </span></p>  
         <a>should be selected</a>
 </div>
 <a>should not be selected</a>

如何选择 div 中具有 class1 而不是其他地方的所有 a 元素。我试着做.class1 > a { } 但它没有选择我需要的所有 a 标签

Answer 1

你的选择器

.class > a

.class1 > a {
  color:red;
  }

<div class="class1">
  <div> <a>should be selected</a> 
  </div>
  <p><span> <a>should be selected</a> </span>
  </p>
  <a>Just this will be selected</a>
</div>

只针对 .class 中的 a 标签的直接后代。只需深入一层。

与

.class a

.class1 a {
  color: red;
}

<div class="class1">
  <div> <a>should be selected</a> 
  </div>
  <p><span> <a>should be selected</a> </span>
  </p>
  <a>should be selected</a>
</div>

您选择了 .class 中的所有 a 标签。所有级别。