草庐IT

nth-Child

全部标签

javascript - 纯 Javascript : event. 目标 : Get the next Sibling, & 第一个 child

这个问题在这里已经有了答案:PortabilityofnextElementSibling/nextSibling(3个答案)关闭5年前。我有一个HTML表格并为每一行设置了事件监听器:vargreyHeadings=document.querySelectorAll(".grey");console.log(greyHeadings);greyHeadings.forEach(function(greyHeading){greyHeading.addEventListener('click',function(e){displayDescription(e,greyHeading);

html - 为什么 div#foo hr :first-child not work

我觉得这应该行得通,如果你能说#foop:first-child为什么#foohr:first-child行不通。如果有人能解释这一点,我将不胜感激。我在这里设置了一个JSFiddle演示-http://jsfiddle.net/mGu7x/6/ 最佳答案 没有元素是其父元素的第一个子元素。参见thisupdateddemo这使得边界更加明显,并将hr移到顶部。您可能想看看:first-of-type这是CSS3中的新功能,可以满足您的需求。(我可以在非当前IE之外使用suggeststhatithaswidesupport吗)。参

html - :nth-child(2n) of [attribute=value]

我有一个包含行的列表,每个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 - :last-child in ng-repeat not working

我使用Angular的ng-repeat多次打印一个div。但是最后一个child的造型似乎有点不对劲。我需要为ng-repeat元素的最后一个子元素提供特定的样式。这是我正在做的:.link-ticketsdiv:last-child{ float:left;}{{acct_details.client_name}}{{available_stages[ticket_data.stage_id].stage_name}}{{ticket_data.created_at|format|date}}那么,我做错了什么? 最佳答案 您还

html - 第 n 个 child 没有针对正确的元素?

.test:nth-child(1),.test:nth-child(2),.test:nth-child(3){color:#0F0}TestTestTestTesthttps://jsfiddle.net/dkfj2xzj/13/UPDATED如果有帮助,我的jQuery代码为什么不跳过.ruinIt类而不是针对第三个.test?我正在添加s是动态的,当一个没有.checkDrop添加了类,我需要跳过它。谢谢 最佳答案 这是因为nth-child选择器并不意味着它是该特定类的nth。这意味着它是第nth个sibling。所以nt

html - :nth-of-type selector overrides all other CSS selectors

我正在尝试复习我的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线,蓝色仍然显示在中间,只有奇数单元格显示为红色。

javascript - 无法使用 jquery 选择第一个 child

我不明白我做错了什么。我有以下html元素:Section1Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.Namanibh.Donecsuscipiteros.Nammi.Proinviverraleoutodio.Curabiturmalesuada.Vestibulumaveliteuantescelerisquevulputate.Section2Sednonur

html - 选择第 n 个 child 的类(class)

我正在寻求有关使用nth-childCSS选择器的帮助。如果你看看我的HTML...AAAABAAAABAAA...我有一排这样的字母:AAAABAAAABAAA我只想显示第一个B并隐藏其他的,但是我似乎无法按预期选择类。当我尝试使用时:.b:nth-child(1){display:block;}.b:nth-child(n+2){display:none;}它不起作用,我必须使用(5)选择它才能获得第一个B。帮助将不胜感激。JSFiddle:http://jsfiddle.net/SrM9T/1/ 最佳答案 这不需要javasc

html - 使用 nth-child 选择多个子元素

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

html - CSS 正文 :first-child

有人可以向我解释为什么这不起作用吗?body:first-child{color:#f00;}Ishouldbered.Thisisnotred.根据我的阅读,第一个子选择器应该从body标记中选择第一个div对象。如果它没有选择div元素,那么它在选择什么? 最佳答案 :first-childbody:first-child中的伪类对body标签进行操作,因此如果您想要body的第一个child使用childselectorbody>:first-child{color:#f00;}这会给你body的第一个child。