问题描述:

I want to apply the effect only on tag elements 'p'. but I have a div blocking the effect! The paragraph two must be in blue, how do?

<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

网友答案:

You are probably looking for the :nth-of-type selector.

p:nth-of-type(odd) { background: #ff0000; }
p:nth-of-type(even) { background: #0000ff; }
<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>
网友答案:

Use :nth-of-type instead.

p:nth-of-type(odd) {
  background: #ff0000;
}
p:nth-of-type(even) {
  background: #0000ff;
}
<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>
相关阅读:
Top