Question

我在容器中有一行在引导程序中有一行和一个容器。我试图隐藏第一个第二个孩子班。由于某种原因，它似乎不适合我。我已经让它在过去工作所以我不确定为什么它现在不工作。我不想使用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>

Answer 1

选择器.rounded-image:nth-child(1)实际上意味着＆＃34;具有rounded-image类的元素，它是同一时间内父母的第一个孩子＆＃34;。通常，组合选择器（如tag.class或.class:pseudo-class）表示这些选择器的AND条件。

CSS Selectors Level 4引入了:nth-child(An + B of ...)语法，它允许用给定的类＆＃34;表达第一个元素。条件为: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元素。

Answer 2

:nth-child表示“其父级的第n个子级”，而不是“与选择器其余部分匹配的子集中的第n个子级”。

.rounded-image:nth-child(1)匹配class="rounded-image"元素，这些元素是其父级中的第一个子元素。

<div class="col-md-3 col-xs-6 rounded-image"> </div>是其中第二个孩子。

CSS没有任何机制来测试“与选择器的其余部分匹配的子集中的第n个子”，你只能使用JavaScript（你已经排除了）来实现它。

Answer 3

我能够像这样定位第一个：

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

为什么呢？不确定

<!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(2) {
  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>

Answer 4

要使其工作，您需要将类rounded-image添加到所有兄弟元素。 nth-child事物不会按照您的假设工作，它会从其父元素中选择所有子元素，然后选择nth-child。这是更新的代码。试试这个。

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12  text-center global-offices rounded-image">
          <h1>Connect with One of Our Global Offices</h1>
        </div>
        <div class="col-md-3 col-xs-6 rounded-image">hello</div>
        <div class="col-md-3 col-xs-6 Address-lines rounded-image">
          <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 rounded-image">hello 2</div>
        <div class="col-md-3 col-xs-6  Address-lines rounded-image">
          <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>

CSS

.rounded-image {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  height: 118px;
  width: 210px;
}

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

另一个类

4 个答案: