html - :first-child selector not working on li (list item)

Question

JSfiddle:https://jsfiddle.net/iqbal98/rxp0dxm9/

问题:选择类的第一个实例 search-result-group-posts

在这种情况下 ul有很多li或称为 .search-result-item也是，但特别是在

li.search-result-item.search-result-group-posts

我要第一个li有一个不同的 background-color和一个 margin-left

这就是我想要的:https://jsfiddle.net/iqbal98/rxp0dxm9/1/ (添加了 html 内联 css)

进展:

• 查看/*DOES NOT WORK*/评论区快速看到问题
• 我正在使用 Sass 和 :first-child选择器是这样使用的:<b>&:</b>first-child .我也尝试过分开的方式(没有“&”)

li.search-result-group[data-search-group=posts]{
        border-bottom-width:0;
      }
      .search-result-group-posts:first-child{
        margin-left:10%;/*DOES NOT WORK*/
        background-color:red;/*DOES NOT WORK*/
      }
      li.search-result-item.search-result-group-posts{
        position:relative;
        border:1px solid brown;
        display:inline-block!important;
        width:29.478%;
        border-radius:4px;
        margin:0 5px;
        .search-result-post-up{
          font-size:16px!important;
          border-radius: 10px;
          padding:4px;
          .search-result-post-title{
            margin-left:3%;
            font-size:110%!important;
          }
          .search-result-post-content{
            white-space:normal!important;
            margin:.3% 2% .7% 2%;
            font-size: 70%!important;
            text-align:justify;
          }
        }
      }

<ul class="search-result-list" style="height: 755.383px;">
  <li class="search-result-group" data-search-group="posts">Posts<span class="fa fa-newspaper-o"></span></li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem Ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem Ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-group" data-search-group="categories">Categories</li>
  <li class="search-result-item search-result-group-categories">category-1</li>
  <li class="search-result-item search-result-group-categoies">category-2</li>
  <li class="search-result-group" data-search-group="user-favorites">Favorites</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-1</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-2</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-3</li>
  <li class="search-result-group" data-search-group="keywords">Keywords</li>
  <li class="search-result-item search-result-group-keywords">keyword-1</li>
  <li class="search-result-item search-result-group-keywords">keyword-2</li>
  <li class="search-result-item search-result-group-keywords">keyword-3</li>
  <li class="search-result-item search-result-group-keywords">keyword-4</li>
</ul>

Answer 1

对于那些想要选择类的第一个实例的人来说，语法如下:

.the-class{
    background-color: red; /*APPLY TO ALL*/
}
.the-class ~ .the-class {
    background-color: none; /*CANCEL TO SIBLINGS*/
}

在我的例子中，我在初始 jsfiddle 中的所有 SCSS 代码之上添加了这个:

.search-result-group-posts{
    background-color: red;
}
.search-result-group-posts ~ .search-result-group-posts {
    background-color: none;
}

今天学到了很好的一课...