css选择器:nth-child可能出现的问题
in with 0 comment

css选择器:nth-child可能出现的问题

in with 0 comment

由于某些特殊需求,我们需要让第一个段落和第二个段落,于是有以下这种写法

<!DOCTYPE html>
<html>
<head>
<style> 
#deo>.ol:nth-child(n):not(:nth-child(n+3))
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<div id="deo">
<p >我很好</p>
<p class="ol">第一个段落。</p>
<p class="ol">第二个段落。</p>
<p class="ol">第三个段落。</p>
<p class="ol">第四个段落。</p>
</div >
<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

由于计算n的时候会把第一个也计算进去,导致第一个段落和第二个段落没有变色

<!DOCTYPE html>
<html>
<head>
<style> 
/**#deo>.ol:nth-child(n+1):not(:nth-child(n+4))
{
bacround:#ff0000;
}**/
或者
#deo>.ol:nth-child(n+2):not(:nth-child(n+4))
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<div id="deo">
<p >我很好</p>
<p class="ol">第一个段落。</p>
<p class="ol">第二个段落。</p>
<p class="ol">第三个段落。</p>
<p class="ol">第四个段落。</p>
</div >
<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>
0评论