选择三个第一个div

时间:2016-02-11 16:01:49

标签: html css css-selectors

在CSS中我想选择三个第一个div。我有这段代码:



div:nth-child(3n) {
  background: red;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore laborum necessitatibus nobis obcaecati, mollitia, eos sint dolor odit. Possimus dolores recusandae sed totam, voluptatibus, voluptatum. Voluptatibus minus aut, quam ratione.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates perferendis et saepe omnis nemo, dolores quia ipsam ea blanditiis quaerat autem aut id itaque magnam recusandae sint architecto! Error, consequuntur.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>
&#13;
&#13;
&#13;

我尝试使用CSS但不起作用。

1 个答案:

答案 0 :(得分:11)

它没有按预期工作,因为@abstractproperty def val(self): return self._val @val.setter def val(self, x): pass 将选择每个第三个元素。

您需要选择从第三个元素开始向后计数的每个元素,因此您可以使用 public class IndexViewModel { public bool HasPassword { get; set; } public string PhoneNumber { get; set; } public bool TwoFactor { get; set; } public bool BrowserRemembered { get; set; } } //........... Expression<Func<IndexViewModel, bool>> ex = System.Linq.Dynamic.DynamicExpression.ParseLambda<IndexViewModel, bool>("TwoFactor"); var model = new ReactJs.NET.Models.IndexViewModel() { TwoFactor = true }; var res = ex.Compile()(model); // res == true System.Diagnostics.Debug.Assert(res); :nth-child(3n)

换句话说,给定模式-n + 3-1n + 3应该是an+b(或省略),因为您不想跳过元素。此外,a也应为负数,1应为a,因为您从第三个元素开始。

b
3

值得指出的是,div:nth-child(-1n + 3) { background: #f00; }只会选择元素,如果它是前三个元素之一,也是元素类型<div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div>。换句话说,如果第三个元素是div:nth-child(-1n + 3),则只会选择前两个div元素:

span
div

如果元素类型不同(如上所述),那么您应该使用:nth-of-type()代替:

div:nth-child(-1n + 3) {
  background: red;
}
<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>