Question

我有两个DIV与类＆＃34;包装＆＃34;。我想要对它们进行一般的设计，并为最后一个提供特殊的风格：

<div class="cont">   

<span class="help">
<div class="wrapper">aaaa</div>
</span>


<span class="help">
<div class="wrapper">bbbbb</div>
</span>

</div>

（在我的实例中，我在span中有多个div，所以我需要定位这个特定的类）

我尝试了各种CSS规则：

div.wrapper {  background:green;   }
div.wrapper:last-child{ background:red; }

div > span > div.wrapper {  background:green;   }
div > span > div.wrapper:last-child{ background:red; }

div .wrapper {  background:green;   }
div .wrapper:last-child{ background:red; }

没什么，有效，甚至没有：

div div {  background:green;   }
div div:last-of-type { background:red; }

它总是让所有东西都变成红色，好像每个DIV都是最后一个孩子。

Answer 1

:last-child是相对于父母的，所以这里：

<div class="cont">   
    <span class="help">
        <div class="wrapper">aaaa</div>
    </span>

    <span class="help">
        <div class="wrapper">bbbbb</div>
    </span>
</div>

带文字.wrapper的{{1}}是第aaaa个:last-child，<span>，第.help个.wrapper {1}}也是第bbbbb个:last-child，<span>。

您需要将.help选择器应用于:last-child，然后选择最后一个.help，然后使用descendant或child选择器定位其中的.help：

.wrapper

如果您在单个.help:last-child > .wrapper中也可以有多个.wrapper，而您只想选择最后一个，那么它将是：

.help

以下是一个例子：

＆＃13;

.help:last-child > .wrapper:last-child

＆＃13;

body {
  font-family: monospace;
  font-size: 16px;
}

.cont {
  border: 3px solid #000;
  margin: 0 0 3px;
}

.help + .help {
  margin: 3px 0 0;
}

.wrapper {
  background: #F0F;
  padding: 1px 6px;
}

.help:last-child > .wrapper:last-child {
  background: #FF0;
}

＆＃13;

正如您在评论中指出的那样，如果<div class="cont"> <div class="help"> <div class="wrapper">AAA</div> </div> <div class="help"> <div class="wrapper">BBB</div> </div> </div> <div class="cont"> <div class="help"> <div class="wrapper">CCC</div> </div> <div class="help"> <div class="wrapper">DDD</div> </div> <div class="help"> <div class="wrapper">EEE 1</div> <div class="wrapper">EEE 2</div> <div class="wrapper">EEE 3</div> </div> </div>中的最后一个元素不是.cont，而前一个元素是，则不会选择此一个元素（前一个元素）。

最好的选择是使用:nth-last-child( <nth> [ of <selector># ]? )：

.help

但对Selectors Level 4的支持仍然很低......

有良好支持的替代方案是使用:last-of-type，但它有一个限制：现在，您用于.help:nth-last-child(1 of .help) > .wrapper:last-child的元素必须与用作子项的其他元素不同（直接后代）.help：

＆＃13;

.cont

＆＃13;

body {
  font-family: monospace;
  font-size: 16px;
}

.cont {
  border: 3px solid #000;
  margin: 0 0 3px;
}

.help + .help {
  margin: 3px 0 0;
}

.foo {
  display: block;
  background: #0FF;
  margin: 3px 0 0;
  padding: 1px 6px;
}

.wrapper {
  background: #F0F;
  padding: 1px 6px;
}

.help:last-of-type > .wrapper:last-child {
  background: #FF0;
}

＆＃13;

用某些类来定义div的最后一个孩子

1 个答案: