類型的n，包括其他元素

Question

我有一個項目網格，其中某些項目之后要有一個空格。 我嘗試使用:nth-of-type將樣式應用到我不想應用到右側的項目的第一列。 但是，當我有分隔符時，CSS似乎會感到困惑。

https://jsfiddle.net/yquw291h/2/

如您所見，每個額外的div之后，計數都會減少，但是CSS當然應該只考慮每個.box ？

有沒有辦法讓我只影響每個項目？ 我只希望第一列具有某些樣式，我也很高興使用JS解決方案。

的HTML

<div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>

的CSS

.box {
    width: 48%;
    float: left;
    height: 30px;
    background: #ccc;
}

.box:nth-of-type(odd){
    margin-right: 4%;
    background-color: red;
}

.splitter {
    width: 100%;
    float: left;
}

Answer 1

這是對:nth-of-type()的誤解。 它正在尋找元素的類型 （div），也就是（odd），並且僅將樣式應用於也屬於class="box"的樣式。

您的第5個div是一個分割器，即使它沒有class="box" ，它仍然會被計數。 它只是沒有應用樣式，因為您的選擇器指定了.box nth-of-type。 下一個奇數是拆分器之間的<div class="box">2</div> 。

萬一您還沒趕上，它將計算容器中的所有div。 只是因為.box div中的文本為.box ，所以不能使它們在div的“列表”中具有均勻編號的條目。

由於您在評論中說無法編輯標記，因此這是一個jQuery實現（感謝BoltClock的幫助）：

 var container = document.getElementById("search-results"); var descendants = container.getElementsByTagName("div"); var x, i = 0; for (x = 0; x < descendants.length; x++) { var nth = $(descendants).eq(x); if (nth.hasClass("splitter")) { i = 0; continue; } if (nth.hasClass("box")) { if (i % 2 == 0) { nth.addClass("odd"); } i++; } }; 

 .box { width: 48%; float: left; height: 30px; background: #ccc; } .odd { margin-right: 4%; background-color: red; } .splitter { width: 100%; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="search-results"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="splitter">splitter</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="splitter">splitter</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> </div> 

您可以根據Tim的答案建議修改標記，而無需使用JavaScript即可實現所需的功能。 或者，您可以使用一組不同的元素進行划分來對其進行修改。 但這僅在分隔符之間的每個節中具有偶數個div的情況下才有效：（關於所使用的選擇器，我已經評論了每個元素的編號狀態）。

 .box { width: 48%; float: left; height: 30px; background: #ccc; } .box:nth-of-type(odd){ margin-right: 4%; background-color: red; } .splitter { width: 100%; float: left; } 

 <div> <div class="box">1</div> <!-- odd --> <div class="box">2</div> <!-- even --> <div class="box">3</div> <!-- odd --> <div class="box">4</div> <!-- even --> <hr class="splitter"/> <!-- N/A --> <div class="box">1</div> <!-- odd --> <div class="box">2</div> <!-- even --> <div class="box">3</div> <!-- odd --> <div class="box">3</div> <!-- even --> <hr class="splitter"/> <!-- N/A --> <div class="box">1</div> <!-- even --> <div class="box">2</div> <!-- odd --> <div class="box">3</div> <!-- even --> <div class="box">4</div> <!-- odd --> <div class="box">5</div> <!-- even --> <div class="box">6</div> <!-- odd --> <div class="box">7</div> <!-- even --> <div class="box">8</div> <!-- odd --> </div> 

此時，需要提出問題，為什么需要列？ 如果您擁有某種表格數據，則應使用<table> 。 如果只需要兩列並排的列，為什么不將一組div放在“左”容器中，而將另一組放在“右”容器中？ 這樣，您可以通過.left div {}和.right div {}選擇器對它們進行.left div {}樣式設置。

Answer 2

實際上，它按應有的方式工作。 :nth-of-type轉換為父元素的這種類型（div）的編號。 因此，您可以通過將框包裝在分隔符之間的簡單父元素中來輕松解決問題：

 .box { width: 48%; float: left; height: 30px; background: #ccc; } .box:nth-of-type(odd){ margin-right: 4%; background-color: red; } .splitter { width: 100%; float: left; } 

 <div> <div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> <div class="splitter">splitter</div> <div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> <div class="splitter">splitter</div> <div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> </div> </div> 

Answer 3

我相信這是對:nth-of-type選擇器如何工作的誤解。 .box選擇器不限制:nth-of-type選擇器。 它充當附加的子過濾器。 在這種情況下，將選擇所有奇數div，然后對那些奇數div中具有box類的樣式進行樣式設置。

在您的示例中，這種情況下的奇數div是：

<div>
    <div class="box">1</div> <!-- Odd -->
    <div class="box">2</div>
    <div class="box">3</div> <!-- Odd -->
    <div class="box">4</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="box">4</div> <!-- Odd -->
    <div class="box">5</div>
    <div class="box">6</div> <!-- Odd -->
    <div class="box">7</div>
    <div class="box">8</div> <!-- Odd -->
</div>

但是，在上面列出的那些奇怪的divs ，只有以下這些：

<div>
    <div class="box">1</div> <!-- Odd w/ class box -->
    <div class="box">2</div>
    <div class="box">3</div> <!-- Odd w/ class box -->
    <div class="box">4</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd w/ class box -->
    <div class="box">3</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd w/ class box-->
    <div class="box">3</div>
    <div class="box">4</div> <!-- Odd w/ class box -->
    <div class="box">5</div>
    <div class="box">6</div> <!-- Odd w/ class box -->
    <div class="box">7</div>
    <div class="box">8</div> <!-- Odd w/ class box-->
</div>

匹配其他過濾器要求，因為它們還必須包含class box 。

例：

以下是如何使用幾個:nth-child選擇器創建CSS范圍的示例。 如果您無法更改HTML結構（如其他答案所示），這將很有幫助：

 .box { width: 48%; float: left; height: 30px; background: #ccc; } .box:nth-child(n+1):nth-child(odd):nth-child(-n+4), .box:nth-child(n+6):nth-child(even):nth-child(-n+8), .box:nth-child(n+10):nth-child(even):nth-child(-n+17), .box:nth-child(n+19):nth-child(odd):nth-child(-n+21){ margin-right: 4%; background-color: red; } .splitter { width: 100%; float: left; } 

 <div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="splitter">splitter</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="splitter">splitter</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="splitter">splitter</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> 

注意：上面的標記比您的問題中所提供的標記更廣泛。 它基於完整的jsfiddle標記，而不是問題中包含的簡化版本。

這是您的小提琴，已更新為包含上面顯示的更改。