CSS nth-of-type不合逻辑

Question

CSS:

.banner:nth-of-type(1) {background-color:red;}
.banner:nth-of-type(2) {background-color:blue;}

HTML:

<div id="container">
  <div class="copy">copy 1</div>
  <div class="banner">banner 1</div>
  <div class="copy">copy 1</div>
  <div class="banner">banner 2</div>
  <div class="copy">copy 1</div>
  <div class="banner">banner 3</div>
  <div class="banner">banner 4</div>
</div>

.banner不管其他兄弟元素是什么,CSS不应该计算元素吗？

我期待横幅1有红色背景,横幅2有蓝色背景,但是获得横幅1的蓝色背景和横幅2没有背景 - 如果我使用的话,我会期待这个nth-child(n).在这里查看我的小提琴:http://jsfiddle.net/JjNBV/3/

Answer 1

nth-of-type适用于元素的类型 - 即<div>在这种情况下,不适用于类.

• .banner:nth-of-type(1)不匹配任何东西,因为没有任何.banner元素是第一个div内部container.

• .banner:nth-of-type(2)所述第一匹配.banner元件,因为它是第二div内container.

没有一个CSS3选择器可以按照您期望的方式匹配类.

如果您需要这种行为,则需要为横幅和副本使用不同的元素类型,然后nth-of-type根据需要为您工作.HTML5提供了几个可满足您在这方面需求的元素.

您使用哪些元素取决于您使用它们的内容; 您提供的代码不给予足够的线索,我给你一个明确的建议,但这里是一个与你的代码copy更改从元素<div>到<article>元素...

<div id="container">
  <article class="copy">copy 1</article>
  <div class="banner">banner 1</div>
  <article class="copy">copy 1</article>
  <div class="banner">banner 2</div>
  <article class="copy">copy 1</article>
  <div class="banner">banner 3</div>
  <div class="banner">banner 4</div>
</div>

通过此更改,您现有的CSS现在应该按预期工作.(这里是显示它工作的jsFiddle)

CSS4确实有一个选择器nth-match(),可能也可以做你想要的,但是没有浏览器支持这个选择器(在不久的将来也看不到),所以暂时不是一个真正的选择.