如何在CSS中选择元素及其第一个子元素而不重复?

您的选择器,一旦更正:

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

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

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

#some_element, #some_element:first-child

将选择 #some_element 仅当该元素是其父元素的第一个子元素时。上面纠正的选择器有一个类似的问题,它将选择 #某些元素(_E) 元素,然后 每个元素 这是一个 :first-child 它的父母。考虑到这一点,尽管您的问题中没有明确指出,但您可能希望进一步更正您的选择器:

#some_element, #some_element > :first-child

将选择 #某些元素(_E) 元素,以及 只有 这个 :第一个孩子 该元素。

此外,为了进一步发展答案,使用SASS和LESS,您可以选择元素及其 :第一个孩子 像这样:

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(作为一个业余爱好者,我很少需要处理选择器语法允许的特别复杂的布局),所以 也许 是选择 :第一个孩子 .

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

由于一个复杂的选择器一次只能表示一个元素结构,因此您确实必须两次引用具有该ID的元素:一次引用该元素本身,一次引用其第一个子元素(由 :first-child 伪类)。

如上所述,应该有一个组合符将ID选择器和 :第一个孩子 伪 otherwise they'll both point to the same element :

#some_element, #some_element > :first-child

你应该使用 :first-child 以这种方式:

#parent {
    background: red;
    width: 100px;
    height: 100px;
}

.child {
    background: black;
    width: 50px;
    height: 50px;
}

.child:first-child {
    background: blue;
    width: 50px;
    height: 50px;
}

<div id="parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>