CSS

Question

我最近一直在努力弄清楚为什么这不起作用。我开始绞尽脑汁试图为一个简单的问题找到一个好的解决方案，但我能找到的每一种方法似乎都很混乱。基本上我想做的是对第一个 child 应用一些样式，在 parent 中使用特定的 class，在我的示例中，我试图将红色背景色应用到每个 .parent 中的 .class 的第一个实例。你可以在 fiddle here.

中看到我的尝试

这是我创建的可以运行的最终代码。问题是这看起来很乱，我真的不喜欢我必须将所有 .child classes 设置为红色然后将除第一个以外的所有设置回白色的事实。必须有一个 cleaner/better 方法来做到这一点？

HTML

<div class="parent">
    <p>Paragraph</p>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

<div class="parent">
    <p>Paragraph</p>
    <div>Broken</div>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

CSS

/*** Does Not Work ***/
.child:first-child{
    background-color:#f00;
}

/*** Does Not Work ***/
.child:nth-of-type(1){
    background-color:#f00;
}

/*** Works But Is Messy! ***/
.child{
    background-color:#f00;
}
.child ~ .child{
    background-color:#fff;
}

Answer 1

可能有点多，但您可以像这样使用 :not 和通用选择器 *：

*:not(.child) + .child {
  color: red;
}

<div class="parent">
  <p>Paragraph</p>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

注意： 但是，序列中的任何中断（另一个非子类 div 后跟另一个子类 div）都会重复选择器.

JSfiddle Demo

Answer 2

可能是这样的：

.parent .child:nth-last-child(4) {
    background-color: #f00;
}

Demo

Answer 3

如果您不介意更改 HTML 标记，解决方案是：

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="children">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
  </div>
</div>

并且：

.child:first-child{
    background-color:#f00;
}

看到这个fiddle。

Answer 4

我发现“:first-of-type”很适合这种类型的东西：

#parent .child:first-of-type {
  background: red;
}

如果需要，您也可以对最后一个使用相同的方法：

#parent .child:last-of-type {
  background: red;
}

CSS - Select 首先 child 和 class

CSS - Select first child with class

html

css-selectors