Question

是否可以定位li内具有特定类的第一个ul？例如：

 <ul>
     <li class="a"></li> <!-- I want to target this li -->
     <li class="a"></li>
     <li class="a"></li>
     <li class="b"></li> <!-- and this li -->
     <li class="b"></li>
     <li class="b"></li>
 </ul>

有可能吗？

Answer 1

使用 :first-child 伪类和adjacent sibling selector +。

＆＃13;

.a:first-child, /* Select the first child element */
.a + .b { /* Select the first element with 'b' class */
  background-color: dodgerblue;
}

＆＃13;

<ul>
  <li class="a"></li>
  <li class="a"></li>
  <li class="a"></li>
  <li class="b"></li>
  <li class="b"></li>
  <li class="b"></li>
</ul>

＆＃13;

Answer 2

尝试选择：nth-child（）和：第一个孩子

ul li:nth-child(4) {
 //some css
}

和

case 'UPDATE_ITEM':
        let newList = state.slice()
        newList.splice(action.payload.index, 1, action.payload.item)
        return newList;

Answer 3

您无法选择class作为first-child的参数。而是使用~运算符来选择反向。即应用除第一个孩子以外的休息方式。

＆＃13;

li.a, li.b{
 color: green; /*your styles for first elemenets*/
}
li.a ~ .a { /*differentiate rest of them from first*/
  color: black;
}
li.b ~ .b {
  color: black;
}

＆＃13;

<ul>
  <li class="a">1</li>
  <!-- I want to target this li -->
  <li class="a">2</li>
  <li class="a">3</li>
  <li class="b">4</li>
  <!-- and this li -->
  <li class="b">5</li>
  <li class="b">6</li>
</ul>

＆＃13;

Answer 4

通常，您只能定位元素，其中的命名属性值或元素中属性的名称。那么，我会说答案可能是......不是吗？（仅限于我自己的知识）

那就是说..

是否可以插入空<{1}} 之前要定位的每个项目？

如果是这样，您可以轻松选择这样的项目：

<li>

ul li {
  color: red
}
li:empty {
  display: none
}
li:empty + li {
  color: green
}

首先在`ul`中定位具有特定类的`li`，仅使用css

4 个答案: