css - 如何在 CSS 中不重复地选择一个元素及其第一个子元素？

Question

我需要选择一个特定的元素，它是 CSS 中的第一个子元素。

这是我现在使用的规则:

#some_element, #some_element:first-child {
    ...
}

但是，我真的怀疑像这样重复 id 的元素是不是一个好习惯。

有没有更好更正确的方法来做到这一点？

Answer 1

您的选择器，一旦更正:

#some_element, #some_element :first-child {
    ...
}

是用CSS写的最短的方式；不幸的是，CSS 到目前为止还没有压缩选择器的快捷语法。

顺便说一下，您的原始选择器:

#some_element, #some_element:first-child

仅当该元素是其父元素的第一个子元素时才会选择 #some_element。更正后的选择器——上面——有一个类似的问题，它会选择 #some_element 元素，然后是 every element :first-child 其 parent 。鉴于此，您可能希望进一步将选择器更正为:

#some_element, #some_element > :first-child

这将选择 #some_element 元素，仅该元素的 :first-child。

此外，为了进一步开发答案，同时使用 SASS 和 LESS，您可以像这样选择元素及其 :first-child:

div {
  min-height: 3em;
  border: 1px solid #000;
  width: 80%;
  margin: 0.5em auto;
}
#some_element {
  /* properties of #some_element: */
  background-color: #ffa;
  &, > :first-child {
  /* shared properties of
     #some_element and its first-child: */
    border: 2px solid red;
  }
  > :first-child {
  /* properties of the first-child of
     #some_element: */
    background-color: #f90;
  }
}

将编译为:

div {
  min-height: 3em;
  border: 1px solid #000;
  width: 80%;
  margin: 0.5em auto;
}
#some_element {
  /* properties of #some_element: */
  background-color: #ffa;
}
#some_element,
#some_element > :first-child {
  /* shared properties of
     #some_element and its first-child: */
  border: 2px solid red;
}
#some_element > :first-child {
  /* properties of the first-child of
     #some_element: */
  background-color: #f90;
}

请注意，我只是非常、非常偶尔会看一下 SASS 或 LESS(作为一个爱好者，我很少需要使用它们的选择器语法允许的特别复杂的布局)，所以 em>可能是选择:first-child的更简洁的方式。

我还认为值得注意的是，在这种情况下，SASS 或 LESS 都没有提供任何增加的简洁性(尽管它们可能有很多次会提供)。