僞類：nextTo？

Question

比方說，我有以下HTML：

<ul> 
    <li id="1">First issue.</li> 
    <li id="2" class="error">Second issue.</li> 
    <li id="3" class="error">Third issue.</li> 
    <li id="4">Fourth issue.</li> 
    <li id="5" class="error">Fifth issue.</li> 
    <li id="6" class="error">Sixth issue.</li> 
    <li id="7" class="error">Seventh issue.</li> 
    <li id="8" class="error">Eighth issue.</li> 
    <li id="9">Ninth issue.</li> 
    <li id="10" class="error">Tenth issue.</li> 
</ul> 

下面CSS：

.error { 
    background-color: rgba(255, 0, 0, 0.2); 
} 

什麼我希望做的是樣式在序列中的第一個和最後一個<li>風格不同於位於中間的其他<li>。

例如，#2, #5, #10應該都匹配「首先在序列選擇」; #3, #8, #10應該與「上一個順序選擇器」匹配。

我想申請以下樣式爲「先入序列」和「後進序列」，分別爲：

.firstInSequence { 
    border-radius-top-right: 10px; 
    border-radius-top-left: 10px; 
} 

.lastInSequence { 
    border-radius-bottom-right: 10px; 
    border-radius-bottom-left: 10px; 
} 

是否有選擇，我可以用它來做到這一點本身在CSS？

Answer 1

正如在其他的答案說，你可以風格的「第一序列的」使用:not和:first-child僞選擇：

:not(.error) + .error, 
.error:first-child { 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
} 

我想我找到了「最後一序列的」在溶液中此方案具有圓角。它使用完成的成品完全不同的方法，但有類似的結果結束：

的基本技術是應用僞元素與radial-gradients列出不.error.後.error是項目S，並將其移動比上年（.error）列表項：

.error + :not(.error):before { 
    content:''; 
    display:block; 
    width:10px; 
    height:10px; 
    position:absolute; 
    top:-20px; 
    left:0; 
    background:-webkit-radial-gradient(100% 0,circle,transparent 10px,white 0); 
} 

.error + :not(.error):after { 
    content:''; 
    display:block; 
    width:10px; 
    height:10px; 
    position:absolute; 
    top:-20px; 
    right:0; 
    background:-webkit-radial-gradient(0 0,circle,transparent 10px,white 0); 
} 

確保li有position:relative;。

最後，在最後一個border-radius，使用last-of-type：

.error:last-of-type{ 
    border-bottom-right-radius:10px; 
    border-bottom-left-radius:10px 
} 

Demo（僅適用於簡單的Webkit）

Answer 2

我想你可能能夠湊齊這件一起工作，但不是全部。但這是我的想法開始。

自由地運用CSS3 not selector和adjacent sibling combinator的。

這些都是我覺得你有做的機會件。

http://jsfiddle.net/PDQMg/

錯誤是第一次在列表

li.error:first-child { } 
<li error /> 
<li noerror /> 
... 
<li /> 

錯誤是後無差錯。

li:not(li.error) + li.error { } 
<li noerror /> 
<li error /> 
... 
<li /> 

錯誤是最後的名單

li.error:last-child { } 
<li /> 
... 
<li class="error" /> 

Answer 3

對於 「第一順序」 你可以試試這個，只要要素是相鄰的：

演示：http://jsfiddle.net/WkxyP/

:not(.error) + .error, 
.error:first-child { 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
} 

• :not(.error) + .error - 類別爲「錯誤」的下一個相鄰元素沒有類別「錯誤」
• .error:first-child - 類別爲「error」的元素是另一個元素的第一個子元素，對於上述選擇器無法匹配的情況

我認爲，涵蓋一切。不知道如何做這個特殊的謎題「順序最後」。

順便說：檢查您的屬性名稱，應該是border-top-left-radius而不是border-radius-top-left，等等。