nth-child 中奇数/偶数子元素的问题 [英] Problem with odd/even child elements in nth-child
本文介绍了nth-child 中奇数/偶数子元素的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个这样的网站:
<html xmlns="http://www.w3.org/1999/xhtml"><头><标题></标题><link rel="stylesheet" type="text/css" href="article_style.css"/></头><身体><div 类="节"><!--<h1>标题</h1>-->段落</div>段落</div>段落</div></div><div 类="节">段落</div>段落</div>段落</div></div></身体></html>这是 CSS:
div.section{边框:1px纯黑色；}div.section div:nth-child(偶数){颜色:绿色；}div.section div:nth-child(奇数){红色;}
结果如下:
这没关系，因为在 each 部分中，奇数 div 为红色，偶数为绿色.但是当我在第一部分的开头添加标题时(示例中的注释代码)我得到了这个:
我不想那样.我希望像以前一样，但只是在第一部分有一个标题.所以首先是标题，然后是红色段落.
解决方案 使用 nth-of-type 改为:
div.section{边框:1px纯黑色；}div.section div:nth-of-type(偶数){颜色:绿色；}div.section div:nth-of-type(奇数){红色;}
I have a web site like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="article_style.css" />
</head>
<body>
<div class="section">
<!--<h1>header</h1>-->
<div>
paragraph
</div>
<div>
paragraph
</div>
<div>
paragraph
</div>
</div>
<div class="section">
<div>
paragraph
</div>
<div>
paragraph
</div>
<div>
paragraph
</div>
</div>
</body>
</html>
and this is CSS:
div.section
{
border: 1px solid black;
}
div.section div:nth-child(even)
{
color: Green;
}
div.section div:nth-child(odd)
{
color: Red;
}
And this is the result:
This is OK because I get red for odd div and green for even in each section.
But when I add header at the begginig of first section (commented code in sample) I get this:
I don't want that. I want the to have like before, but just with a header in first section. So at first header and then red paragraph.
解决方案 Use nth-of-type instead:
div.section
{
border: 1px solid black;
}
div.section div:nth-of-type(even)
{
color: Green;
}
div.section div:nth-of-type(odd)
{
color: Red;
}
这篇关于nth-child 中奇数/偶数子元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆