CSS奇怪的行为类型的nth

我使用CSS nth类型（偶数）排序div。通常它工作正常，但是当我发出AJAX请求并将新的HTML div放到另一个之后时，选择器开始工作很奇怪。CSS奇怪的行为类型的nth

.row > .cd-timeline-block-sort:nth-of-type(even) > .cd-timeline-content { 
    float: right; 
}

Printscreen of timeline (before)

<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284"> 
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="268"> 
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

和后AJAX请求：

Printscreen of timeline (after)

<!-- 1 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284"> 
<!-- 2 --><div class="cd-timeline-block" data-event-id="268" style="display: none;"> 
<!-- 3 --><div class="cd-timeline-block cd-timeline-block-sort eventForm" id="eventEditForm" style="display: block;"> 
<!-- 4 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

以我第二个例子是4个格，并将它们的3类.CD-timeline-块排序。我需要把（1）放在左边，（3）放在右边，（4）放在左边。

来源

2015-07-10 Jean Sapharick

你能发布相关的html吗？ –

好吧，我更新了帖子 –

显然你想要一个“nth级”伪选择器which does not exist。由于您使用的JavaScript，我建议这些替代方法：

无论是从DOM
如果这是不可能的，那么不需要的元素的标签名称更改为别的东西：

(1st div) div.cd-timeline-block.cd-timeline-block-sort 
(1st del) del.cd-timeline-block 
(2nd div) div.cd-timeline-block.cd-timeline-block-sort 
(3rd div) div.cd-timeline-block.cd-timeline-block-sort

而CSS将是：

.row > div:nth-of-type(even) { } 
.row > del     { display: block; }

另一种解决方案是将你的内容是不同的：

(1st div) div.group 
       .cd-timeline-block.cd-timeline-block-sort 
(2nd div) div.group 
       .cd-timeline-block 
       .cd-timeline-block.cd-timeline-block-sort 
(3rd div) div.group 
       .cd-timeline-block.cd-timeline-block-sort

而CSS：

.row > div:nth-of-type(even) { }

来源

2015-07-10 10:24:20

看起来很好！我无法删除不需要的元素..但是，当我使用不存在的标签名称时它很好吗？ –

这个问题解释了这个问题：http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name。我发布了三个解决方法。第二个使用['del']（http://www.w3.org/TR/html-markup/del.html）标签，这是一个有效的HTML标签（但你可以使用span或其他）。我建议第三个。 –

**非常感谢！** –

你可以找到你所需要的jQuery元素。

// 3rd element with class "cd-timeline-block-sort" 
var $block = $('.cd-timeline-block-sort').eq(2); 
// Check, whether we found it 
if (typeof($block) != 'undefined') { 
    // Set CSS styles you need 
    $block.css('float', 'right'); 
}

如果需要，您可以编写更复杂的逻辑。

来源

2015-07-10 10:43:06

CSS奇怪的行为类型的nth

回答

相关问题