相关疑难解决方法(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().

有人可以解释原因吗？

我之前使用过CSS,我遇到了下面的CSS样式,不知道它的作用.

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

我对nth-of-type伪类有点困惑,以及它应该如何工作 - 特别是与nth-child类相比.

也许我有错误的想法,但鉴于这种结构

<div class="row">
    <div class="icon">A</div>
    <div class="icon">B</div>
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
</div>

..第三个子元素(第一个带有类标签)应该(也许？)可以选择

.row .label:nth-of-type(1) {
    /* some rules */
}

但是,至少在Chrome中,它不会选择它.只有当它是行中的第一个子节点时才会起作用,它与nth-child相同 - 因此,这与nth-of-type有什么区别？