CSS nth-child（）和：eq（）在我的代码中不起作用

时间：2016-08-10 14:07:06

标签： css css-selectors

在我的代码中，我尝试访问a个链接，使每个链接颜色不同。我使用了nth-child或:eq但不起作用。

我有一个div包装器，里面有3个div，每个div都有一个链接。我想在商品div包装器中选择一个带有数字的每个链接。

如果我选错了选择器或者我的CSS错了，请有人告诉我。

＆＃13;
＆＃13; 
.offers-box a:nth-of-type(1) {
  color: #3F265F;
}
.offers-box a:nth-of-type(2) {
  color: #F04B5B;
}
＆＃13; 
<div class="offers m-t-50 m-b-15">
  <div class="row">

    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE STANDARD</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE CORPORATE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box offers-last-box">
        <div class="row">
          <div class="col-md-12">
            <h3>COMMUNICATIONS STANDARD TELEPHONIQUE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <p><span class="blue-color">Le portail unifie</span> de vos communications d'entreprises</p>
            <img src="/images/image.png" class="img-responsive" alt="Responsive image">
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->

  </div>
  <!--row-->
</div>
<!--offers-->
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

类.offers-box的div不是兄弟，因此您无法使用nth-child或first-child等。

.offers-box:nth-of-type()不起作用，因为使用:nth-of-type(1)会选择所有.offers-box，因为具有该类的每个元素都是其父级的唯一子元素。 .offers-box是col-md-4

中唯一的孩子

与.offers-box a:nth-of-type()相同，每个a是a div中唯一的.offers-box

同一个父.col-md-4中的三个siblings为children和仅 .offers > .row，因此您可以使用它们。

在每个.col-md-4中都有一个.offers-box，因此请使用以下代码来实现您的需求。

让我知道它是否有效

＆＃13;
＆＃13; 
.col-md-4:first-child .offers-box a {
  color: red;
}
.col-md-4:nth-child(2) .offers-box a {
  color: green;
}
＆＃13; 
<div class="offers m-t-50 m-b-15">
  <div class="row">

    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE STANDARD</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE CORPORATE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box offers-last-box">
        <div class="row">
          <div class="col-md-12">
            <h3>COMMUNICATIONS STANDARD TELEPHONIQUE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <p><span class="blue-color">Le portail unifie</span> de vos communications d'entreprises</p>
            <img src="/images/image.png" class="img-responsive" alt="Responsive image">
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->

  </div>
  <!--row-->
</div>
<!--offers-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

每个.offers-box中只有一个标签，因此：nth-​​of-type（1）因其基于零的索引而无法工作。

我认为这可能是你想做的事情

.offers-box:nth-of-type(1)  a {
    color: #3F265F;
}
.offers-box:nth-of-type(2) a {
    color: #F04B5B;
}
相关问题
最新问题