Question

ul {
  display: inline-block;
  list-style: none;
  text-align: center;
}

ul::after {
  display: table;
  content: "";
  clear: both;
}

ul:first-child {
  background-color: red;
  margin-left: 2rem;
}

li {
  float: left;
}

<body>
  <ul>
    <li>House</li>
    <li>Dog</li>
  </ul>
</body>

使用上面的代码，奇怪的是：first-child选择器（伪类）不起作用。我本来以为带有House的li具有红色背景。相反，没有红色背景。你们知道为什么吗？

https://codepen.io/anon/pen/zQyVzM

Answer 1

您需要将<tr v-for="x in books"> <th @click="CurrClickedTitle = x.titel; getAnzahlBuecher(x.isbn)"> {{x.titel}}</th> <td>{{x.isbn}}</td> <td>{{x.erscheinungsdatum}}</td> <td>{{x.preis}}</td> <td><button @click="delSpalte(x.isbn); getBuecher();" class="btn btn-danger">Löschen</button></td>伪类添加到first-child标记中，而不是li。

ul

根据MDN documentation，它会在同一个元素的同级元素中选择第一个元素。

：已清除元素上的第一个子选择器

1 个答案: