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中对此进行了测试，它运行正常。

在ul标签中定义div的lastchild

2 个答案: