html - 另一个类下的第n个子选择器CSS

This question already has answers here:

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

                                    （6个答案）


                                2年前关闭。


我在一个容器中有一行，在bootstrap中有一个容器。我正在尝试隐藏第2个子类。由于某种原因，它似乎对我不起作用。我已经过去使用它了，所以我不确定为什么现在不起作用。我不想使用Jquery或javascript作为解决方案。我已经添加了到目前为止的代码。

<!DOCTYPE html>
<html>
<head>
  <style>
.rounded-image{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /*background-image: url('http://placehold.it/234x150');*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 118px;
    width:210px;
}

.rounded-image:nth-child(1){
display: none;

}

</style>
</head>
<body>
<div class="container">
    <div class="row">

      <div class="col-md-12  text-center global-offices">
        <h1>Connect with One of Our Global Offices</h1>
      </div>

      <div class="col-md-3 col-xs-6 rounded-image"> </div>
      <div class="col-md-3 col-xs-6 Address-lines">
         <address>
             <!-- Dublin -->
          <strong>Address</strong><br>
          232 <br>
          10/11 e <br>
          <strong><abbr title="Phone">Phone</abbr></strong> +3530<br>
          <strong><abbr title="Fax">Fax:</abbr></strong> +353
        </address>

      </div>




      <div class="col-md-3 col-xs-6 rounded-image"> </div>
      <div class="col-md-3 col-xs-6  Address-lines">
        <address>
          <!-- Italy -->
          <strong>Address</strong><br>
          Via Marsala I<br>
          Roma<br>
          <strong><abbr title="Phone">Phone</abbr></strong> +370<br>
          <strong><abbr title="Fax">Fax:</abbr></strong> +39
        </address>
      </div>

  </div>
</div>
</body>
</html>

最佳答案

选择器.rounded-image:nth-child(1)实际上表示“同时是其父级的第一个子级的rounded-image类元素”。通常，组合选择器（如tag.class或.class:pseudo-class）意味着这些选择器的AND条件。

CSS选择器级别4引入了:nth-child(An + B of ...)语法，该语法允许将“具有给定类的第一个元素”条件表示为:nth-child(1 of .rounded-image)。不幸的是，它目前仅在Safari中有效。

解决当前支持的CSS问题的唯一方法（不依赖特定的DOM顺序）似乎是为所有紧随其后的.rounded-image元素设置特殊规则
.rounded-image元素：

.rounded-image {
   display: none;
}
.rounded-image ~ .rounded-image {
   display: block;
}

第一个选择器与所有.rounded-image元素匹配，而第二个选择器与除第一个选择器之外的所有.rounded-image元素匹配（该元素之前没有其他.rounded-image元素）。因此，仅第一个.rounded-image元素将被隐藏。