我不知道为什么我的：最后一个孩子选择器不能正常工作

时间：2016-05-28 15:09:22

标签： html css

在我的CSS中，我使用包裹的divs类来调用last-child来删除正确的边距，但由于某种原因，我无法找到问题。

＆＃13;
＆＃13; 
.user-panel {
  border-bottom-color: #8F8F8F;
  background-color: #FCFCFC;
  border-style: solid;
  border-width: 1px;
  border-color: #D9D9D9;
  float: left;
  width: 257px;
  margin-top: 40px;
  border-bottom-color: #8F8F8F;
  margin-right: 5px;
}

.user-panel-wrap:last-child {
  margin-right: 0px;
}

.user-panel:hover {
  background-color: #B2D195;
}

.user-panel-image {
  margin: 5px auto;
  display: block;
}

.user-panel-header {
  font-size: 26px;
  text-align: center;
  margin: 0;
  color: black;
}

.user-panel-paragraph {
  color: #A0A09E;
  margin: 0;
  text-align: center;
  font-size: 19px;
}
＆＃13; 
  <div class="user-panel-wrap">
  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img class="user-panel-image" src="pictures/tockici.jpg">
      <p class="user-panel-header">SERVICES</p>
      <p class="user-panel-paragraph">It's what we do!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/cart.png" alt="" class="user-panel-image">
      <p class="user-panel-header">ORDER</p>
      <p class="user-panel-paragraph">Start the process!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
     <img src="pictures/faq.png" alt="" class="user-panel-image">
      <p class="user-panel-header">FAQ</p>
      <p class="user-panel-paragraph">Find some answers</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/login.jpg" alt="" class="user-panel-image">
      <p class="user-panel-header">LOG IN</p>
      <p class="user-panel-paragraph">Current clients</p>
    </div>
  </a>
  </div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

.user-panel-link:last-child .user-panel {
  margin-right: 0px;
}

希望这个解决方案适合你☝️ 

.user-panel {
  border-bottom-color: #8F8F8F;
  background-color: #FCFCFC;
  border-style: solid;
  border-width: 1px;
  border-color: #D9D9D9;
  float: left;
  width: 257px;
  margin-top: 40px;
  border-bottom-color: #8F8F8F;
  margin-right: 5px;
}
.user-panel:hover {
  background-color: #B2D195;
}
.user-panel-image {
  margin: 5px auto;
  display: block;
}
.user-panel-header {
  font-size: 26px;
  text-align: center;
  margin: 0;
  color: black;
}
.user-panel-paragraph {
  color: #A0A09E;
  margin: 0;
  text-align: center;
  font-size: 19px;
}
.user-panel-link:last-child .user-panel {
  margin-right: 0px;
}
<div class="user-panel-wrap">
  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img class="user-panel-image" src="pictures/tockici.jpg">
      <p class="user-panel-header">SERVICES</p>
      <p class="user-panel-paragraph">It's what we do!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/cart.png" alt="" class="user-panel-image">
      <p class="user-panel-header">ORDER</p>
      <p class="user-panel-paragraph">Start the process!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/faq.png" alt="" class="user-panel-image">
      <p class="user-panel-header">FAQ</p>
      <p class="user-panel-paragraph">Find some answers</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/login.jpg" alt="" class="user-panel-image">
      <p class="user-panel-header">LOG IN</p>
      <p class="user-panel-paragraph">Current clients</p>
    </div>
  </a>
</div>

答案 1 :(得分：0)

此处将:last-child伪选择器应用于您的包装div。因此，您选择作为其父项的最后一个子项的包装器。而且因为你只创建了一个包装器，你只需选择一个包装器。

我怀疑你想要选择这个包装器的最后一个子节点。为此，您需要执行.user-panel-wrap > :last-child。 而且因为我还怀疑您要设置的保证金不是<a>标签，而是设置在.user-panel上，您实际上应该.user-panel-wrap > :last-child .user-panel。

＆＃13;
＆＃13; 
.user-panel {
  border-bottom-color: #8F8F8F;
  background-color: #FCFCFC;
  border-style: solid;
  border-width: 1px;
  border-color: #D9D9D9;
  float: left;
  width: 257px;
  margin-top: 40px;
  border-bottom-color: #8F8F8F;
  margin-right: 5px;
}

.user-panel-wrap > :last-child .user-panel {
  margin-right: 0px;
}

.user-panel:hover {
  background-color: #B2D195;
}

.user-panel-image {
  margin: 5px auto;
  display: block;
}

.user-panel-header {
  font-size: 26px;
  text-align: center;
  margin: 0;
  color: black;
}

.user-panel-paragraph {
  color: #A0A09E;
  margin: 0;
  text-align: center;
  font-size: 19px;
}
＆＃13; 
<div class="user-panel-wrap">
  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img class="user-panel-image" src="pictures/tockici.jpg">
      <p class="user-panel-header">SERVICES</p>
      <p class="user-panel-paragraph">It's what we do!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/cart.png" alt="" class="user-panel-image">
      <p class="user-panel-header">ORDER</p>
      <p class="user-panel-paragraph">Start the process!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
     <img src="pictures/faq.png" alt="" class="user-panel-image">
      <p class="user-panel-header">FAQ</p>
      <p class="user-panel-paragraph">Find some answers</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/login.jpg" alt="" class="user-panel-image">
      <p class="user-panel-header">LOG IN</p>
      <p class="user-panel-paragraph">Current clients</p>
    </div>
  </a>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

：last-child无法正常工作，因为.user-panel-wrap是包装器而不是子选择器。 ：最后一个孩子需要关注孩子，如下：

.parent-wrapper .child-name:last-child {
    margin-right: 0px; 
}

但是，由于您在.user-panel-link中包含了.user-panel，因此也无法正常工作。尝试这样的事情：

<div class="user-panel-wrap">
    <div class="user-panel">
        <a class="user-panel-link" href="#">
            <img class="user-panel-image" src="pictures/tockici.jpg">
            <p class="user-panel-header">SERVICES</p>
            <p class="user-panel-paragraph">It's what we do!</p>
        </a>  
    </div>
    <div class="user-panel">
        <a class="user-panel-link" href="#">
            <img src="pictures/cart.png" alt="" class="user-panel-image">
            <p class="user-panel-header">ORDER</p>
            <p class="user-panel-paragraph">Start the process!</p>
        </a>  
    </div>
    <div class="user-panel">
        <a class="user-panel-link" href="#">
            <img src="pictures/faq.png" alt="" class="user-panel-image">
            <p class="user-panel-header">FAQ</p>
            <p class="user-panel-paragraph">Find some answers</p>
        </a>  
    </div>
    <div class="user-panel">
        <a class="user-panel-link" href="#">
            <img src="pictures/login.jpg" alt="" class="user-panel-image">
            <p class="user-panel-header">LOG IN</p>
            <p class="user-panel-paragraph">Current clients</p>
        </a>  
    </div>
</div>

使用这个CSS：

.user-panel-wrap .user-panel:last-child {
    margin-right: 0px;
}
相关问题
最新问题