编程问答

前端开发问题 Java开发问题 C/C++开发问题 Python开发问题 C#/.NET开发问题 php开发问题 移动开发问题 数据库问题

nth-child 中奇数/偶数子元素的问题

2022-10-19前端开发问题

本文介绍了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:

Live Demo

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 中奇数/偶数子元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

layui 实现实时刷新一个外部的div

主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...

2024-11-14 前端开发问题

156

layui 单选框、复选框、下拉菜单不显示问题如何解决？

1. 如果是ajax嵌套了页面，请确保只有最外层的页面引入了layui.css 和 layui.js ,内层页面切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...

2024-11-09 前端开发问题

313

layui要如何改变时间日历布局大小？

问题描述我想改变layui时间日历布局大小，这个要怎么操作呢？解决办法可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...

2024-10-24 前端开发问题

271

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...

2024-10-18 前端开发问题

125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...

2024-04-20 前端开发问题

CoffeeScript 总是以匿名函数返回

CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...

2024-04-20 前端开发问题

相关推荐

layui 实现实时刷新一个外部的div

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

jQuery怎么动态向页面添加代码？

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源