0

需要帮助的人我有这个 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>

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

4

3 回答 3

2

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

.parentDiv .col1of5:last-child {
    /* CSS */
}
于 2013-05-07T07:30:28.960 回答
2

我刚看到你的HTML。

这是解决方案。参考这个小提琴。

的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;
}

希望这可以帮助。

于 2013-05-07T07:31:46.600 回答
0

尝试这个：

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

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

于 2013-05-07T07:29:37.043 回答