CSS第一個孩子選擇，特殊類別遺漏

我在列表的頂部和底部做圓角，每個LI都有一個背景顏色。由於背景顏色，整個UL的圓角不適用，並且第一個和最後一個LI仍然有方角。CSS第一個孩子選擇，特殊類別遺漏

一切都很好，除了有第一個LI實際上需要隱藏的場景，並且我在下面的示例中使用類名稱進行操作，我有「隱藏我」。

<ul> 
    <li class="hide-me">A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
</ul>

因此，在上面的代碼中，我想用類「hide-me」隱藏LI並顯示LI B，C，D。所以李B的左上角和右上角都會變圓，而李would的左下角和右下角會變圓。

的CSS我使用的是這樣的：

li:first-child { 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
} 

li:last-child { 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
} 

li { background:yellow; } 

.hide-me { display:none; }

但正如你所看到的，我上面的CSS將適用圓角的李一這是隱藏的。但是在這種情況下，由於LI A是隱藏的，因此LI B將位於列表的頂部，但是因爲它不是UL中的第一個孩子，所以它沒有圓角。

因此，對於這種情況，我如何對未隱藏的第一個LI應用圓角？

來源

2011-11-21 adam

似乎棘手，什麼反對只是設置一個類的第二個項目（第一個李未隱藏）？當將第一項設置爲隱藏時，應該不難，使用jQuery（或.net/php）將類添加到下一項。在CSS3中有：nth-child（2）psuedo選擇器，但到處都還未完全支持（又名IE :)。 – ToddBFisher

他們爲什麼不創建一個：第一個匹配的僞選擇器？看起來大多數僞選擇器只有在你不將其他類應用到元素時纔有用。 – animuson

完全同意1+ – ToddBFisher

嘗試使用這樣的：

 
li:first-child, 
li.hide-me:first-child + li { 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
}

而且，會簡單地使用這項工作？

 
ul { 
    border-radius: 8px; 
    overflow: hidden; 
}

來源

2011-11-21 02:37:10 joshnh

我試過了溢出：隱藏的技巧，它不起作用。但是相鄰元素的想法是很好的，謝謝。 – adam

但是，如果在第一個非隱藏元素之前有多個隱藏元素，則這不起作用。 – fletom

您可以將第一個選擇器更改爲li:first-child, .hide-me:first-child + li。

因此，如果第一個孩子是li，請選擇第一個孩子，或者選擇li，如果它是第一個孩子，則選擇一個類別爲.hide-me的元素。

來源

2011-11-21 02:34:20 thirtydot

CSS第一個孩子選擇，特殊類別遺漏

回答

相關問題