：nth-​​child（）选择器适用于特定元素

Question

我想仅将效果应用于标记元素＆＃39; p＆＃39;。但我有一个阻止效果的div！第二段必须是蓝色的，怎么办？

<p>The first paragraph.</p>
<div>The div tag.</div>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

p:nth-child(odd) { background: #ff0000; }

p:nth-child(even) { background: #0000ff; }

fiddle

Answer 1

您可能正在寻找:nth-of-type选择器。

＆＃13;

＆＃13;

p:nth-of-type(odd) { background: #ff0000; }
p:nth-of-type(even) { background: #0000ff; }

＆＃13;

<p>The first paragraph.</p>
<div>The div tag.</div>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

改为使用:nth-of-type。

＆＃13;

＆＃13;

p:nth-of-type(odd) {
  background: #ff0000;
}
p:nth-of-type(even) {
  background: #0000ff;
}

＆＃13;

<p>The first paragraph.</p>
<div>The div tag.</div>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-of-type() selector.</p>

＆＃13;

＆＃13;

＆＃13;

或者，Selectors L4扩展了:nth-child()的语法，允许

:nth-child(odd of p)  { background: #ff0000; }
:nth-child(even of p) { background: #0000ff; }

...但是浏览器还没有支持它。