Question

问题：选择班级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/（添加了html内联css）

PD：

查看/*DOES NOT WORK*/评论部分以快速查看问题
我使用Sass，:first-child选择器以这种方式使用：&:first-child。我也尝试了分开的方式（没有＆＃34;＆amp;＆＃34;）

＆＃13;

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;
          }
        }
      }

＆＃13;

<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>

＆＃13;

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;
}

今天吸取的教训......

：第一个子选择器不工作li（列表项）

1 个答案: