Css块布局-偶数/奇数？
CSS块布局是一种用于网页布局的技术，它可以将网页内容分成多个块，并按照一定的规则进行排列和定位。在块布局中，可以使用偶数/奇数选择器来选择特定位置的元素。
偶数/奇数选择器是CSS中的伪类选择器，用于选择序号为偶数或奇数的元素。它们可以通过使用:nth-child()或:nth-of-type()选择器来实现。
偶数选择器（:nth-child(even)）选择序号为偶数的元素，而奇数选择器（:nth-child(odd)）选择序号为奇数的元素。
这种选择器在块布局中可以用于实现交替样式或特定排列效果。例如，可以使用偶数选择器来设置列表中的偶数行背景色，或者使用奇数选择器来设置奇数行的样式。
以下是一个示例代码，展示了如何使用偶数/奇数选择器来实现交替背景色的效果：
/* 偶数行背景色 */
li:nth-child(even) {
background-color: #f2f2f2;
}
/* 奇数行背景色 */
li:nth-child(odd) {
background-color: #ffffff;
}在实际应用中，偶数/奇数选择器可以用于任何需要交替样式的场景，比如表格的行样式、列表的项样式等。
腾讯云提供了一系列与CSS块布局相关的产品和服务，例如云服务器（CVM）、云数据库MySQL版、云存储（COS）等。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
3回答
更改其他元素的背景色。
、、、
我想在以下内容中更改其他元素的背景色：
<div class="dets">
<div>Simple Layout</div>
<div>Few Pictures/Links</div>
<div>Element Uniformity</div>
</div>
所以第一个简单的布局是白色的，第二个图片/链接是黑色的，依此类推。我有三个这样的结构嵌套在其他div元素中。我知道:偶数，：奇怪的方法，但它并不像预期的那样。它继续贯穿每个"dets“类，每次都增加索引。我想要奇
浏览 2提问于2017-06-08得票数 2
回答已采纳
4回答
你好，我在PHP中做表格的样式设计。我只停留在一个点，即，我无法改变表中行的颜色，或者像奇数行一样，应该以白色背景显示，甚至用蓝色显示。我试过下面的css代码，但它不起作用。
tbody:nth-child(2n) { /* even rows */
background-color:#eee;
}
tbody:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
浏览 12提问于2012-05-12得票数 1
回答已采纳
5回答
我想更改HTML表中指定列的背景色。是否可以使用属性来执行此操作。我找到了使用行的方法。
tr.even {
background-color: white;
}
浏览 0提问于2014-02-19得票数 1
我正在使用以下代码在一个页面上剥离几个表格：
$(".events-table tr:even").css("background-color", "#fff");
$(".events-table tr:odd").css("background-color", "#efefef");
这可以很好地工作，但是偶数/奇数间隔应用于页面上的每个表。我希望每一张桌子都有相同的图案。这意味着，对于页面上的每个表，每个表应该在第一行以相同的颜色开始，然后在第二行以相同的颜色开始。
有什么建议吗？
谢
浏览 0提问于2009-10-25得票数 8
我正在为样式编写一个带有jQuery的html页面。因此，我有以下几点：
$("table tr:odd td").css({"background-color":"rgb(233,247,255)"});
这使每一排人都变蓝了。但刚才我在其中一个牢房里放了张桌子。发生了什么？好的，它将内表的行处理为外层表中的一行，着色变得混乱(两个连续的蓝色行，而内表中的行是白色的)。
那么，如何在这样的选择器中排除子表呢？有没有人？
编辑：
谢谢你的想法和答案。我想出了这段代码，因为我真正想要的是所有表都有偶数/奇数着色(不仅仅是顶层表)：
$("t
浏览 2提问于2009-10-13得票数 4
回答已采纳
8回答
行的交替背景色
、、
我工作的背景颜色交替，并面临一些挑战。我只想通过CSS或JavaScript/jQuery将背景颜色设置为奇怪的行。在小提琴中，我故意隐藏偶数行，因为要求是相同的。我试图使用jQuery来实现它，但无法继续下去。伙计们，请不要建议我用DIV代替桌子。不幸的是，我的工作是旧标记(内联网网站)。对于现有的HTML标记，请提供帮助/指导。
if($('table tr').hasClass('odd')){
$(this).find('td :first-child').css('background','
浏览 12提问于2013-09-11得票数 1
回答已采纳
2回答
我们有嵌套的无序列表和产品数据。为
<ul class="data_holder">
我们想要奇数/偶数背景色。
ul.data_holder:odd => background: #ccc
ul.data_holder:even => background: #FFF
我们的整个结构看起来像这样(如您所见，我们的ul.data_holder位于父无序列表的"li“元素中：
<ul class="row_holder">
<li class="row">
<ul class=&
浏览 28提问于2019-10-24得票数 0
回答已采纳
3回答
我使用下面的代码对奇数行和偶数行应用不同的背景色：
$('#tbl tr:odd').css('background-color', '#ECF6FC');
$('#tbl tr:even').css('background-color', '#ffffff');
但是，在FF和IE中，奇数行和偶数行的显示方式不同，例如：
FF:
IE:
可以看到，在FF中，第一行原来是白色的，而IE中的第一行则是蓝色的。为什么会发生这种情况，解决办法是什么？
浏览 3提问于2010-09-13得票数 2
回答已采纳
作为我对jQuery的第一次尝试，我在一个由PHP生成的网页中做了很多事情。它
在我的导航栏中突出了条目的悬停效果，绕过了某些DIV的角，从外部文件加载了一个名为“postit”的DIV。还意味着斑马-条纹表中有ID=‘播放列表’，即使它们在加载到'postit‘DIV.<code>G 29</code>的HTML中。
在FF 3.6.10中，这一切都很好，但是斑马条纹在IE8中不起作用。我采用了通过搜索所以找到的技术，并在一个独立的PHP文件中测试了它，只有斑马条由jQuery完成。
它在那里工作，但我认为在下面的代码中，我要求jQuery做的几件事情之间存在
浏览 2提问于2011-04-30得票数 0
我有以下jquery代码和：
$("table.altRow > tbody > tr:odd").addClass("oddColor");
$("table.altRow > tbody > tr:even").addClass("evenColor");
和下列css：
.altRow tbody tr.evenColor { background-color : #e9e9e9; }
.altRow tbody tr.oddColor { background-color : #ffffff; }
浏览 2提问于2014-01-04得票数 0
回答已采纳
4回答
在从MySQL数据库读取数据以应用PHP时，是否有机会使每秒钟的记录都有不同的内容(不同的css代码)。
例如:我使用这样的图像作为我的评论系统。
每一幅图像都是圆形的，但我希望每一秒钟的图像都有一个圆形，而其他的图像应该是方形的。
这能办到吗？
浏览 5提问于2014-05-09得票数 1
回答已采纳
2回答
今天，我注意到jQuery选择器和addClass()函数的组合不能在IE8上正常工作。
例如，当我想确保在表中选择偶数行时，我写道：
jQuery(document).ready(function($){
$("#table1 tr:nth-child(even)").addClass("even");
}
对于CSS，我写道：
#table1 tr:nth-child(even), #table1 tr.even {
background-color: #ff0;
}
在Firefox、Chrome、Safari和Opera中，即使没有CSS
浏览 4提问于2010-07-19得票数 12
回答已采纳
6回答
我有一个HTML表格，我在其中动态添加和隐藏行，我希望当前可见的行集总是以可选的背景色显示，以便阅读。
我有以下代码，它们在功能上运行良好，但速度非常慢(特别是在Internet Explorer浏览器上)。
$('table.alternateRow tr:visible').removeClass('odd').filter(':odd').addClass('odd');
这是我的css：
.alternateRow tr {
background-color: #FFFFFF;
}
.alternateRow t
浏览 3提问于2011-06-23得票数 5
回答已采纳
如何对包含在nth-of-type的<li>元素中的<span>元素使用<ul> css选择器
我原本期望span:nth-of-type(odd)和span:nth-of-type(even)能够工作，但他们没有。
span:nth-of-type(even) {
background-color: grey;
}
span:nth-of-type(odd) {
background-color: blue;
}
<ul>
<li>
<span>Test 1</span>
浏览 1提问于2012-10-23得票数 0
回答已采纳
我如何在第二个表行中添加背景色，即使没有显示一些表行？
在我的HTML中，是一个带有一些表行的简单表。就像这样：
<label for="cb">hide blue</label>
<input id="cb" type="checkbox" onchange="hideBlue(this.checked)" />
<table>
<tr data-cat="red">
<td>red car</td>
浏览 5提问于2014-08-25得票数 5
我想做的是：
一种表格的样式，其单元格的背景色因光、中、暗而异。任何给定单元格的背景色都基于其行和列的数目。奇数行和奇数列中的单元格为轻型；奇数行和偶数列或偶数行和奇数列中的单元格为中等；偶数行和偶数列中的单元格为黑色。
我想让它看起来像这样：
这是我的算法：
A. For each Row, assign an index;
B. For each Column, assign an index;
C. For each Cell, {
I. Get the index of this Cell's Row;
II. Get the index of thi
浏览 6提问于2012-02-02得票数 0
回答已采纳
4回答
考虑以下示例：()
HTML：
<div class="wrapper">
<div city_id="1" class="odd">Street Name #1 in city 1</div>
<div city_id="3" class="even">Street Name #2 in city 3</div>
<div city_id="2" class="odd">Street N
浏览 0提问于2011-10-03得票数 1
回答已采纳
3回答
我正在尝试为我的行设计一种奇偶样式。该行将被标记为奇数/偶数类，但样式需要应用于包含td/th的行。
样式不能直接放在行上的原因是，在某些浏览器中，对行应用背景色而不是td/th会导致不一致的结果。
当我将颜色应用到td/th时，它在嵌套场景中会导致问题。
<html><head><title>Nesting</title></head><body>
<style type="text/css">
.even td, .even th {
background-colo
浏览 0提问于2011-07-11得票数 0
看了这个问题的一些答案，但我试了几次，但无法使它发挥作用。
我将如何在每个表中添加一个类来分隔奇数表和偶数表，我尝试过这样做，但无法工作。
<script type="text/javascript">
$(document).ready(function () {
$('.leaguehistorymodule:odd').addClass("column-left");
$('.leaguehistorymodule:even').addClass("column-right");
});
浏览 3提问于2014-02-16得票数 2
回答已采纳
1回答
你好，我想知道是否可以用css表有交替的颜色行？我希望它看起来像这样，
到目前为止，我对表的代码是这样的。我试过了，但似乎无法让它起作用。这个是可能的吗？如果是这样的话，我将如何实现它？谢谢。
<table style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="text-align: center;">
<p>Pricing</p>
<p>Structure</p>
</td&
浏览 1提问于2015-02-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
