伪类：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，等等。