使用 CSS 选择 :first-child 伪选择器“内部”的元素

Question

大家好。

我有一个问题，这样的结构：

<ul>
    <li>
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li class="selected">
        <span><span>
    </li>
    <li>
        <span><span>
    </li>
</ul>

我想选择在父节点上选择的第一个和最后一个...伪代码应该是这样的：

li.selected span { background: #FF4D6E; color: white; }
li.selected:first-child span{border-radius:30px;}
li.selected:last-child span{border-radius:30px;}

问题是span 在.selected 的集合中，所以我想要第一个.selected，以及它的span

Answer 1

第一个孩子可以使用这个

li.selected span {
  background: #FF4D6E;
  color: white;
}
.selected:first-child,
:not(.selected) + .selected span {
  border-radius: 30px;
}

<ul>
    <li>
        <span>not</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li class="selected">
        <span>selected</span>
    </li>
    <li>
        <span>not</span>
    </li>
</ul>

Answer 2

为此，我建议花几个小时来学习 jquery。 Here 是一个很好的 jquery 教程的链接。您可以在大约三个小时内完成本教程。

Jquery 允许您动态选择您想要的任何元素并以几乎任何您可以想象的方式对其进行修改。

这是我用来修改带有 .selected 父元素的第一个和最后一个 span 元素的 CSS 的代码：

var $childOfSelected = $('.selected').children('span')

$childOfSelected.last().css({'border-radius':'30px'});
$childOfSelected.first().css({'border-radius':'30px'});

Answer 3

如果您使用的是 jQuery，请执行以下操作：

$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff");

$("li.selected:first-child span").css("border-radius" : "30px");

$("li.selected:last-child span").css("border-radius" : "30px");

Answer 4

这是不可能的，因为.selected 类元素不是其父元素的第一个。但是您可以通过使用兄弟选择器来解决此问题，如下所示：

/* first child */
li.selected span{
    border-radius: 30px;
}

/* middle children */
li.selected + li.selected span{
     border-radius: 0px;
}

/* last child */
li.selected ~ li.selected ~ li.selected span {
     border-radius: 30px;
}

以上代码假设您只有三个 .selected 元素。如果您有更多并且您知道计数，则更改上面关于计数的最后一个子代码。例如，如果您有四个 .selected 元素。

li.selected ~ li.selected ~ li.selected ~ li.selected span {     
     border-radius: 30px;
}

Example Fiddle