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>

无论其他兄弟元素是什么，CSS都不应该计算.banner个元素吗？

我期待横幅1有红色背景，横幅2有蓝色背景，但是获得横幅1，蓝色背景，横幅2没有背景 - 如果我使用{{1 }}。在这里查看我的小提琴：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现在应该按预期工作。（和here is the jsFiddle显示它正常工作）

CSS4确实有一个选择器nth-match()，它可能也可以做你正在寻找的东西，但是没有浏览器支持这个选择器（也不会在不久的将来看到它们），所以这不是一个真正的选择暂时。

Answer 2

尝试

 .copy:nth-child(n+1) {background-color:red;}
 .banner:nth-child(n+2) {background-color:blue;}

Fiddle此处

CSS nth-of-type不合逻辑

2 个答案: