Question

需要帮助的人我有这个HTML代码：

<div class="editable">
  <div>
     <div class="column col1of5">
     </div>
     <div class="column col1of5"> 
     </div>
     <div class="column col1of5"> 
     </div>
     <div class="column col1of5">
     </div>
     <div class="column col1of5">  
     </div>
     </div>
  </div>

我想选择最后一个.col1of5到css我该怎么做？

Answer 1

使用此CSS获取最后一个孩子：

.parentDiv .col1of5:last-child {
    /* CSS */
}

Answer 2

我刚看到你的HTML。

这是解决方案。请参阅此fiddle。

HTML

<div class="editable">
  <div>
     <div class="column col1of5">1</div>
     <div class="column col1of5">2</div>
     <div class="column col1of5">3</div>
     <div class="column col1of5">4</div>
     <div class="column col1of5">5</div>
     </div>
  </div>

CSS

.editable div {
    background: none repeat scroll 0 0 #292929;
    color: white;
    list-style: none outside none;
    padding-left: 0;
    width: 200px;
}
.editable div div {
    border-bottom: 1px solid black;
    border-top: 1px solid #3C3C3C;
    padding: 10px;
}
.editable div div:first-child {
    border-top: medium none;
}
.editable div div:last-child {
    border-bottom: medium none;
    color: red;
}

希望这有帮助。

Answer 3

试试这个：

.col1of5:last-child {
    /* my CSS rules */
}

:last-child是一个伪选择器，它指向的元素是某个节点的最后一个子元素。这可能听起来合乎逻辑，但它可能会令人困惑，因为您可能认为它应该是.editable:last-child。您应该将选择器应用于子元素本身，而不是父。

CSS选择器代码最后一个元素

3 个答案: