如何 select 一个元素及其第一个子元素而不在 CSS 中重复？

Question

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

这是我现在使用的规则：

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

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

有什么更好更正确的方法吗？

Answer 1

你应该这样使用: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>

Answer 2

由于复杂的选择器一次只能表示一个元素结构，因此您确实必须两次引用具有该 ID 的元素：一次是针对自身，一次是针对其第一个子元素（由:first-child 伪 class 代替）。

如前所述，应该有一个组合器将 ID 选择器和 :first-child 伪分隔开，otherwise they'll both point to the same element:

#some_element, #some_element > :first-child

Answer 3

您的 select 们，更正后：

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

是最短的写法CSS；不幸的是，CSS 目前还没有压缩 selectors.

的快捷语法

顺便说一句，你原来的select或：

#some_element, #some_element:first-child

仅当该元素是其父元素的第一个子元素时，才会 select #some_element。更正后的 selector – 上面 – 有一个类似的问题，它会 select #some_element 元素然后 每个元素 是 :first-child 的父级。鉴于此，您可能希望进一步更正您的 selector 为：

，尽管您的问题中未明确指出

#some_element, #some_element > :first-child

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

此外，为了更深入地发展答案，同时使用 SASS 和 LESS，您可以 select 元素及其 :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（作为一个爱好者，我很少需要使用特别复杂的布局它们的 select 或语法允许），因此可能是 select 和 :first-child.

的更简洁的方法

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

如何 select 一个元素及其第一个子元素而不在 CSS 中重复？

How to select an element and its first child without repetition in CSS?

css

dry

css-selectors