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

这是不可能的，因为.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

Answer 2

如果您使用的是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 3

为此，我建议花几个小时来学习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 4

对于第一个孩子，您可以使用此

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用CSS在第一个子伪选择器“内部”选择一个元素

4 个答案: