当前位置: 动力学知识库 > 问答 > 编程问答 >

css - :nth-child() selector apply in specific elements

问题描述:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: