html - 在 ul 标签中定义 div 的 lastchild

Question

我的结构如下所示：

<div style="">                                                                                       
<ul>      
  <h1>Some text</h1>
  <div class="border">
     <li><a href="#">Some text</a></li>
  </div>
</ul>

<ul>      
  <h1>Some text</h1>
  <div class="border">
     <li><a href="#">Some text</a></li>
  </div>
</ul>
</div>

我想选择 div.border:last-child 但是当我写入我的 css 文件时

//css-file//
.border:last-child: solid 1px black;
//or//
div .border:last-child: solid 1px black;
//or//
div ul .border:last-child: solid 1px black;

问题是我的伪类：last-child 被忽略了，所有带有边框类的 div 都被设置了样式，我只希望最后一个孩子得到边框。

这是一个例子：http: //jsfiddle.net/H3uKp/

我正在使用谷歌浏览器

Answer 1

您的标记不正确，一个ul元素不能包含除 之外的任何其他子元素li，您可以这样做

<ul>
   <li></li>
   <li><div></div></li>
</ul>

而不是使用

ul li:last-of-type {
   border: /* Whatever */ ;
}

如果你想定位 div 而不是使用

ul li:last-of-type div {
   border: /* Whatever */ ;
}

Answer 2

实际上这样做的另一种方式就是这样

<div style="">                                                                                       
<ul>      
  <h1>Some text</h1>
     <li><a href="#">Some text</a></li>
    <h1>Some text</h1>
     <li><a href="#">Some text</a></li>
</ul>

然后只需添加样式

   li {
    border: 1px solid black;
}
    li:last-child {
        border: none;
    }

在 jsFiddle 中对此进行了测试，它工作得很好。