假设我有一个列表的以下结构:和每个宽度为50%,所以我希望每两个都具有相同的背景颜色,如下所示:我可以使用“nth-child()”CSS选择器来执行此操作以最小化代码吗? 最佳答案 ulli:nth-child(4n+1),ulli:nth-child(4n+2){background:#CCC;}ulli:nth-child(4n+3),ulli:nth-child(4n+4){background:#DDD;}这将为您提供从第1个和第2个开始的每第4个元素的颜色#CCC,以及从第3个和第4个开始的第4个元素的颜色#DDDjsf
我在我的CSS中使用nth-child时遇到问题(目前已在Chrome和Firefox中尝试过)。部分DOM在客户端使用原始DOM操作方法(document.createElement、document.appendChild等)动态生成我使用的CSS和生成的DOM如下:CSS:#loginFormlabel{color:#FF0000}#loginFormlabel:nth-child(1){color:#8a8a8a;}DOM:Label1Label2我已经尝试将此HTML和CSS放入JSFiddle中并且一切正常,所以我只能想象这与我的DOM操作有关。我在nth-child的MD
我有一个包含行的列表,每个li都有一个属性data-status其值可以是1-5:我希望data-status为1的每个奇数li都具有不同的背景,可以用CSS实现吗? 最佳答案 如果问题是howtoselectalltheoddelementswithaparticularattribute?,那么其他答案中的解释是可能的,有li[data-status="1"]:nth-child(2n+1){background:#f00;}或者更简单的方式:li[data-status="1"]:nth-child(odd){backgrou
我正在尝试复习我的HTML、JavaScript和CSS3考试;我对CSS选择器和优先级有点困惑。我有以下CSS:table{border:1pxsolidblack;}tr:nth-child(odd){background-color:red;}trtd:nth-of-type(even){background-color:blue;}td{background-color:green;}我认为最后出现的优先,所以我认为表格中的所有单元格都是绿色的。然而,根据第n个类型选择器,偶数单元格仍然是蓝色的。即使我将它放在顶部并移除绿色td线,蓝色仍然显示在中间,只有奇数单元格显示为红色。
divdivp:nth-child(1to5)如何用nth-child选择多个数字,这样我就不用写就得到子元素1到5:divdivp:nth-child(1),divdivp:nth-child(2),divdivp:nth-child(3),divdivp:nth-child(4),divdivp:nth-child(5){}所以它应该是这样的:divdivp:nth-child(1to5) 最佳答案 divdivp:nth-child(n+1):nth-child(-n+5){}将选择元素1到5
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion我只是想问一个问题,CSS中的关键字nth有什么意义吗?是首字母缩略词/缩写吗?
如何在将内联样式应用于元素(显然包含多个元素)时添加nth-child(n)声明。例如,假设我有一个包含三个p元素的div。一般的样式表规则是这样的:divp:nth-child(2){color:blue;}但是,如何在将内联样式应用于包含的div的同时将第二段颜色设置为蓝色? 最佳答案 内联样式属性仅适用于具有该属性的元素。因此,例如,如果您在div上有样式属性,则样式将仅适用于该div(尽管有继承属性和冲突样式)。您不能在另一个元素上使用内联样式属性来定位不同的元素。即使您将样式属性应用于p元素,您也无法根据伪类有条件地应用内
我正在尝试更改div内的奇数div的样式。出于某种原因,当nth-of-type(odd)在另一个div中时,它会影响我的所有div。这是我的常规div和奇数div的代码:.video-entry-summary{width:214px;height:210px;margin-left:10px;float:left;position:relative;overflow:hidden;border:1pxsolidblack;}.video-entry-summary:nth-of-type(odd){width:214px;height:210px;margin-left:0px;f
以下面的代码为例:HelloWorldHelloWorldHelloWorldHelloWorld是否有可能使用:nth-child()或其他方式来选择全部元素的一半?代码应选择上述实例中的第一个/最后一个两个li,然后如果我将li的数量增加到六个,它将选择第一个/最后一个三个。我觉得我将不得不使用JavaScript... 最佳答案 您可以在纯CSS中选择一半的元素...直到一定程度。唯一的缺点是您必须知道总元素的最大数量。可能是150,但它不适用于151。这是一个演示:http://jsfiddle.net/tcK3F/(*)最
我有一个这样的网站:header-->paragraphparagraphparagraphparagraphparagraphparagraph这是CSS:div.section{border:1pxsolidblack;}div.sectiondiv:nth-child(even){color:Green;}div.sectiondiv:nth-child(odd){color:Red;}这是结果:这没问题,因为在each部分中,奇数div为红色,偶数div为绿色。但是当我在第一部分的开头添加标题时(示例中的注释代码)我得到了这个:我不想这样。我想要像以前一样,但只是在第一部分有一