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

回答

相關問題