Question

假设您有一个项目列表：

<li>abc</li>
<li>efg</li>
<li>hij</li>

您希望最后一项是红色的，但只有在有多个<li>的情况下，才有可能没有JavaScript？

Answer 1

the last but not the first child的选择器怎么样？

＆＃13;

li:last-child:not(:first-child) {
  color: red
}

＆＃13;

<ul>
  <li>one</li>
  <li>two</li>  
  <li>three</li>    
</ul>

<ul>
  <li>alone</li>
</ul>

＆＃13;

Answer 2

你可以尝试使用nth-child。

例如，如果您有一个有序列表并且想要定位第二个li，则使用以下代码：

＆＃13;

ul ol:nth-last-child(2){color:#ff0000;}

＆＃13;

    <ul>
    <ol>list 1</ol>
    <ol>list 2</ol>
    <ol>list 3</ol>
    <ul>

＆＃13;

运行代码后，您将看到UL的最后一个子项为红色。

Answer 3

您可以使用CSS :first-child和:last-child选择器，您可以使用不同的选项来实现此目的：

使用定义命令

定义first-child后定义last-child个样式，因此last-child样式会被first-child样式覆盖。

＆＃13;

ul li:last-child{
  color: red;
}

ul li:first-child{
  color: inherit;
}

＆＃13;

<ul>
  <li>First element</li>
</ul>

<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</ul>

＆＃13;

使用！important

使用first-child定义!important个样式，因此它们优先于last-child个样式。

＆＃13;

ul li:first-child{
  color: inherit !important;
}

ul li:last-child{
  color: red;
}

＆＃13;

<ul>
  <li>First element</li>
</ul>

<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</ul>

＆＃13;

使用偏好较重的选择器

CSS中的

id和class选择器比标签选择器具有更重的偏好，因此如果您使用其中一个定义first-child，它将比{{1}更重要在标签选择器中定义的人。

＆＃13;

last-child

＆＃13;

.list li:first-child{
  color: inherit;
}

ul li:last-child{
  color: red;
}

＆＃13;

CSS条件

正如@george在his answer上所说，你可以简单地使用CSS <ul class="list"> <li>First element</li> </ul> <ul class="list"> <li>First element</li> <li>Second element</li> <li>Third element</li> </ul>条件来检查:not()是否也last-child。 是您特定案例的最佳选择。

＆＃13;

first-child

＆＃13;

li:last-child:not(:first-child) {
  color: red
}

＆＃13;

有条件地将CSS应用于没有JavaScript的最后一个列表项

3 个答案:

使用定义命令

使用！important

使用偏好较重的选择器

CSS条件