Question

我尝试使用第n个子选择器，但它没有用。也许是我错误的方式

<ul>
<li class="media list-news">
    <div class="row">
        <div class="col-sm-8 col-md-10">
            <div>
                <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a>
                <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a>
            </div>
            <div>
                <div class="description-news"> value.description
                    <span class="link-date-news"> <i class="fa fa-calendar-o"></i>  value.publishDate </span>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-2 child-selector">
            <div class="link-source btn-xs btn-source" href="javascript:void(0);">
                <i class="fa fa-globe"></i> value.portalName
            </div>
        </div>
    </div>
</li>

示例：https://jsfiddle.net/03koh1w4/

Answer 1

您需要进行一些更改（HTML和CSS）

HTML - ＆gt; 不要关闭所有商品的订单清单

CSS - ＆gt; 将您的（奇数和偶数）提供给您的列表，然后提交给您的班级

<强> CSS

.link-source {
  display:inline;
  color:#fff;
}

li:nth-child(odd) .link-source {
    background: green;
}

li:nth-child(even) .link-source {
    background: red;
}

<强> HTML

<ul>
  <li class="media list-news">
    <div class="row">
      <div class="col-sm-8 col-md-10">
        <div>
          <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a>
          <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a>
        </div>
        <div>
          <div class="description-news"> value.description
            <span class="link-date-news"> <i class="fa fa-calendar-o"></i>  value.publishDate </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-2 child-selector">
        <div class="link-source btn-xs btn-source" href="javascript:void(0);">
          <i class="fa fa-globe"></i> value.portalName
        </div>
      </div>
    </div>
  </li>

  <li class="media list-news">
    <div class="row">
      <div class="col-sm-8 col-md-10">
        <div>
          <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a>
          <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a>
        </div>
        <div>
          <div class="description-news"> value.description
            <span class="link-date-news"> <i class="fa fa-calendar-o"></i>  value.publishDate </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-2 child-selector">
        <div class="link-source btn-xs btn-source" href="javascript:void(0);">
          <i class="fa fa-globe"></i> value.portalName
        </div>
      </div>
    </div>
  </li>
  <li class="media list-news">
    <div class="row">
      <div class="col-sm-8 col-md-10">
        <div>
          <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a>
          <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a>
        </div>
        <div>
          <div class="description-news"> value.description
            <span class="link-date-news"> <i class="fa fa-calendar-o"></i>  value.publishDate </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-2 child-selector">
        <div class="link-source btn-xs btn-source" href="javascript:void(0);">
          <i class="fa fa-globe"></i> value.portalName
        </div>
      </div>
    </div>
  </li>

  <li class="media list-news">
    <div class="row">
      <div class="col-sm-8 col-md-10">
        <div>
          <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a>
          <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a>
        </div>
        <div>
          <div class="description-news"> value.description
            <span class="link-date-news"> <i class="fa fa-calendar-o"></i>  value.publishDate </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-2 child-selector">
        <div class="link-source btn-xs btn-source" href="javascript:void(0);">
          <i class="fa fa-globe"></i> value.portalName
        </div>
      </div>
    </div>
  </li>
</ul>

<强> DEMO HERE

使用第n个子选择器更改背景颜色

1 个答案: