Css選擇器無法正常工作

我已經做了一些搜索/谷歌，但它並沒有帶領任何地方。這是我的問題，我有以下的HTML結構（只是一個樣本，列表的長度是動態的）：Css選擇器無法正常工作

<ul class="collection"> 
    <a class="collection-item head">Alvin</li> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
    <a class="collection-item head">Alvin</li> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
    <a class="collection-item head">Alvin</li> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
    <a href="#" class="collection-item">Alvin</a> 
</ul>

我想CSS他們像這樣：http://i.imgur.com/iip6VXt.png

我使用CSS選擇所有。頭類改變他們的邊框顏色：

.collection .head:nth-child(1){ 
    border-left: 5px solid green; 
} 
.collection .head:nth-child(2){ 
    border-left: 5px solid orange; 
} 
.collection .head:nth-child(3){ 
    border-left: 5px solid blue; 
}

它的工作對.collection的第一個孩子，但第2和第3TH一個沒有改變。我發現css選擇器計算.collection的所有孩子不僅僅是.head類。

所以我卡在那裏。有人知道這種情況嗎？

我有一個很好的回答從Saqib阿明但我不能讓它的工作。所以我做了一個完整的jQuery版本。希望它對uguys有用。

$('.head').each(function(index) { 
    switch (index) { 
     case 0: 
      $(this).css({ 
       property1: 'value1', 
       property2: 'value2' 
      }); 
      break; 
     case 1: 
      $(this).css({ 
       property1: 'value1', 
       property2: 'value2' 
      }); 
      break; 
     case 2: 
      $(this).css({ 
       property1: 'value1', 
       property2: 'value2' 
      }); 
      break; 
    } 
});

來源

2016-01-16 Kat

爲什麼你不使用id這3個字段，你實際上知道只有3個字段。 –

以上這個html只是一個示例。按網站類別列出長度。 – Kat

爲什麼你不使用jQuery這個？它簡單像$（'。collection'）。find（'。head'）。each（function（）{使內容從數組或任何來源顯示}）; –

您是第n個孩子選擇提供了錯誤的價值觀，你的CSS應該是這樣的：

.collection .head:nth-child(1){ 
    border-left: 5px solid green; 
} 
.collection .head:nth-child(5){ 
    border-left: 5px solid orange; 
} 
.collection .head:nth-child(9){ 
    border-left: 5px solid blue; 
}

要了解更多關於第n個孩子選擇的工作方式，請訪問：https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

由於你說的項目數量可能會有所不同，所以你應該使用不同的解決方案，我建議使用jQuery爲每個.head元素添加索引編號，然後使用該索引設置元素的樣式。

jQuery代碼將是：

var counter = 1; 
$('.head').each(function() { 
    $(this).attr('data-index', counter++); 
});

，然後你的CSS將是這樣的：

.collection .head[data-index=1] { 
    border-left: 5px solid green; 
} 
.collection .head[data-index=2] { 
    border-left: 5px solid orange; 
} 
.collection .head:[data-index=3] { 
    border-left: 5px solid blue; 
}

來源

2016-01-16 05:27:37

此列表可以有更多的孩子。該HTML只是一個示例，我不能用這種方式。 – Kat

您是否動態生成列表項？如果是，請提及名稱 –

是的。我的列表的長度跟隨網站的類別。我在我的文章中進行了編輯。那是我的錯誤。我應該提到這一點。 – Kat

系統以.collection父然後開始計數孩子這麼CSS應該

.collection .head:nth-child(1){ 
    border-left: 5px solid green; 
} 
.collection .head:nth-child(5){ 
    border-left: 5px solid orange; 
} 
.collection .head:nth-child(9){ 
    border-left: 5px solid blue; 
}

來源

2016-01-16 05:48:29

Css選擇器無法正常工作

回答

相關問題