相关疑难解决方法(0)

我不能告诉之间的区别element:first-child和element:first-of-type

比如说,你有一个div

div:first-child
→所有<div>元素都是其父母的第一个孩子.

div:first-of-type
→所有<div>元素都是<div>其父元素的第一个元素.

这似乎完全相同,但它们的工作方式不同.

有人可以解释一下吗？

有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().

有人可以解释原因吗？

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

如何选择具有类名称的"最后一个孩子":list？

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的例子不起作用,但是有什么类似的东西可以工作吗？

重要:

a)我不能使用ul li:nth-child(3),因为它可能发生在第四或第五位.

b)没有JavaScript.

任何帮助将不胜感激,谢谢!

我有以下HTML结构:

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>

我想通过CSS选择#c.我试过了:

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}

据我了解li:not(.active)选择所有li元素,但选择类.active.

在这个选择中,我使用:last-child来获取这些li元素中的最后一个.但这不会奏效.怎么了？我想要达到的目标是否可能？

非常感谢你 :)

PS:列表长度是动态的,元素没有任何可用于CSS选择的id(我只是在示例中使用了一些来澄清我想要选择哪个元素);)