Question

如何将最后一个子样式应用于:last-child 元素？

有没有办法在html中指定它是:last-child，即使它不是？

这样的事情：

<ul>
  <li></li>
  <li class="last-child"></li>
  <li></li>
</ul>

或者这个：

<ul>
  <li></li>
  <li last-child></li>
  <li></li>
</ul>

:first-child和:selected相同。

Answer 1

您可以利用与{em> Flexbox / 网格一起提供的order属性：

ul {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
}

ul > li:nth-child(2) {
  order: 1;
}

ul > li:last-child { /* or "> .last-child" */
  border: 1px solid;
}

<ul>
  <li>First child</li>
  <li>Second child</li>
  <li class="last-child">Last child but not displayed last!</li>
</ul>

默认情况下，order 属性的值设置为0，因此通过赋予1的值，我将其置于之后其他所有人;所以我在这里只针对“第二个孩子”，使代码尽可能短/清洁/最佳;我也可以通过赋予:last-child的值来定位1，但是我还需要通过为其赋予{{em>第二个孩子“的目标来定位它{1}}要获得与现在相同的结果，但我们不需要使用2 属性两次，因为只有一次就足够了，在这种情况下...... < / p>

Answer 2

您可以使用此

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

如何申请＆＃34;最后一个孩子＆＃34;样式不是：last-child元素？

2 个答案: