Fatal编程技术网
  • css/
  • Css 伪类：nextTo？

Css 伪类：nextTo？

css

Css 伪类：nextTo？,css,css-selectors,Css,Css Selectors,假设我有以下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"

假设我有以下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>

我想做的是把第一个和最后一个<代码> > LI> <代码>以不同于其他<代码> < LI> < /Cult> s的方式排列在中间。 例如，

#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中本机使用

我想你也许能拼凑出这一部分来工作，但不是全部。但以下是我的想法

充分利用CSS3和

这些是我认为你有机会做到的

错误位于列表的第一位

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

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

li.错误：第一个子{}


  • 
...

  •
    • 错误发生在无错误之后

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

    li:not（li.error）+li.error{}

  • 

...

  •
    • 错误是列表中的最后一个错误

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

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

    li.错误：最后一个子项{}

  • 
...
  • 对于“序列中的第一个”，只要元素相邻，就可以尝试此操作：

    演示：

    • ：not（.error）+.error
      -类为“error”的下一个相邻元素到类为“error”的元素
    • .error:first child
      -类为“error”的任何元素，它是另一个元素的第一个子元素，在上述选择器无法匹配的情况下
    我想这涵盖了一切。不知道如何用这个特殊的拼图来“顺序中的最后一个”

    顺便说一句：检查您的属性名称，应该是
    边框左上角半径
    ，而不是
    边框左上角半径
    ，依此类推。

    如其他答案中所述，您可以使用
    ：not
    和
    ：first child
    伪选择器设置“序列的第一个”的样式：

    :not(.error) + .error,
.error:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
    我想我已经找到了这个场景中“序列的最后一个”的解决方案。它使用完全不同的方法完成成品，但最终的结果类似：

    基本技术是将带有
    径向梯度的伪元素
    应用于非
    .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
    具有
    位置：相对
    
最后，对于最后一个上的
    边界半径
    ，使用
    类型的最后一个
    ：
    

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

    

    （Webkit只是为了简单起见）
    +1有趣的是，我们在同一时间有了相同的基本想法。我认为您不需要
    ：last child
    选择器，除非您试图部分覆盖“序列中的最后一个”位，否则
    不（.error）+。error
    应该覆盖它。是的，我看到了您的答案，实际上更喜欢语法。不幸的是，我看不到他能得到列表中最后一个属性的任何方法，因为CSS中没有：before选择器（我也不认为会有）是的，我认为OP在那个属性上已经没油了。像
    ：not（.error）：prev（.error:first）
    这样的想象可能会起作用（但肯定很难看）。但是这种情况很少见。我在我的文章中“使用”了你的答案，（虽然我是独立地偶然发现的，如果你愿意的话，这是一个解决方案。）然而，我并不是简单地编辑你的文章，因为我为“顺序中的最后一个”想出了一些很好的东西。我很想知道你的想法。不幸的是，演示没有解决#10，它只在顶部四舍五入，而不是底部。这可以用
    ：类型的最后一个
    来解决。我更新了我的答案。+1这是一个相当激进的想法。我能想到的唯一问题（除了让它在跨浏览器中工作外）是：需要纯色背景；需要列表项之间的边距。保证金似乎是一个交易破坏者。您可以在这里使用
    ：last child
    而不是
    ：last of type
    ，因为子元素a
    ul
    的唯一可能类型是
    li
    。该类不相关。如果不能保证最后一个子类具有
    错误
    类，则该类的最后一个子类没有CSS3选择器。