第一个孩子没有按预期影响第一个元素[重复]

Question

为什么该规则不影响第一个 div？ （带有“更新 1”文本）

.update div {
    width:100%;
    height:25%;
    border-top:1px dashed {color:background title};
    padding: 5px;
    color:{color:links nav};
    cursor:pointer;
}

.update div:first-child{
   border:none;
}

.update div:hover{
    color:{color:links nav hover};
}

.update div:hover > .symbol{
    color:{color:links nav};
}

<div class="nav update">
    <a><div><div class="symbol">×</div> update 1</div></a>
    <a><div><div class="symbol">×</div> update 2</div></a>
    <a><div><div class="symbol">×</div> update 3</div></a>
    <a><div><div class="symbol">×</div> update 4</div></a>
</div>

Answer 1

您的代码中没有任何 div 是 .update div 的第一个子元素。你需要做这样的事情：

.update a:first-child > div {
   border:none;
}

虽然 HTML5 允许内联元素中包含像 div 这样的块元素，但我自己不会这样做。或许可以考虑跨度。

再解释一下“第一个孩子”的概念：在您的代码中，每个a 元素都是.update div 的一个孩子。 a 元素中的 div 不是 .update div 的子元素；相反，它们是a 元素的子元素。但是，代码中的每个 a 元素只有一个子 div； 那些子div中的每一个都有另一个子div。因此，要成为子元素的元素，它必须直接位于父元素内部——可以说是向下一层。

Answer 2

更新

有一些错误：

color 的值为a name, 6 or 3 hexadecimal number, or RGB/RGBa, or HSL/HSLa 我以前从未将 {color:links nav} 视为一个值...这真的有效吗？

正如@torazaburo 和@Ralph.M 所指出的，您的 div 仅符合 first-child 和 first-of-type 的 a 的条件，因此您的 .update 不是任何 div 的直接祖先（即父级） .因此，您需要通过遍历层次结构的每个级别来获得更多特异性。

1. div.update.nav
2. a
3. div

试试这个：

  .update a:first-child div:first-of-type

注意：在您的情况下 first-child 和 first-of-type 工作方式相同，我认为可能需要关注的区别是如果您使用 first-child 和 nth-child @987654337 @ 变量的计数不同于 nth-type-of。

CSS 中的:first-of-type 选择器允许您定位元素在其容器中的第一次出现。

.update div {
  width: 100%;
  height: 25%;
  border-top: 2px dashed red;  /* this is a color name */
  padding: 5px;
  background-color: rgb(0,0,0);  /* this is RGB */
  cursor: pointer;
  color: rgba(250,250,250,.7);  /* this is RGBa */
}
.update a:first-of-type div:first-of-type {
  border: none;
}
.update div:hover {
  color: hsl(240, 60%, 50%);  /* this is HSL */
}
.update div:hover > .symbol {
  color: hsla(324, 100%, 50%, .8);  /* this is HSLa */
}

<div class="nav update">
  <a>
    <div>
      <div class="symbol">×</div>update 1
    </div>
  </a>
  <a>
    <div>
      <div class="symbol">×</div>update 2
    </div>
  </a>
  <a>
    <div>
      <div class="symbol">×</div>update 3
    </div>
  </a>
  <a>
    <div>
      <div class="symbol">×</div>update 4
    </div>
  </a>
</div>

见ARTICLE