Question

CSS

.list-group-item:first-child{
  border-top: none !important;
}

HTML

<li class="list-group-item" ng-repeat="user in data">
 {{user.name}}
</li>

我的第一个孩子出了什么问题？

演示http://plnkr.co/edit/FKXdsJRc9eu4TiN9UPMY?p=preview

Answer 1

:first-child选择器用于选择父tag的第一个子节点。子项必须嵌入在同一个父标记中，不能与css class一起使用。

如果要选择第一个列表项，则可以修改它以选择<ul>标记的第一个子项。

li:first-child{
  border-top: none !important;
}

Answer 2

将列表嵌入到<ul></ul>标记中，正如预期的那样，它会起作用。

Answer 3

从list-group-item class !important

中删除border-top

CSS：

.list-group-item {
padding: 6px 15px !important;
border-top: 2px solid #DDD;
padding-top: 15px !important;
}

HTML：

这里的东西

<ul>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">jason</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">james</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">josh</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">joshua</li>
</ul>

<强> LINK

Answer 4

您可以通过两种方式更改它：

A）在li（现在使用）上使用它，但使用first-of-type

B）将这些礼物置于ul class =＆＃34;示例＆＃34; （你应该这样做）并做

.example:first-child{
    border-top: none !important;
}

（您的示例已编辑：http://plnkr.co/edit/QTlaDQPXfdg3W6oNYex4?p=preview）

Answer 5

您可以尝试以下代码：

http://plnkr.co/edit/jqecyBMcrLfVaGtxhIaM?p=preview

 <ul><li class="list-group-item" ng-repeat="user in data">
{{user.name}}
</li></ul>

Answer 6

那里没有任何父标签。你应该使用这样的东西：

HTML

<ul class="list-group-item">
  <li ng-repeat="user in data">
    {{user.name}}
  </li>
</ul>

CSS

.list-group-item li {
  padding: 6px 15px !important;
  border-top: 2px solid #DDD !important;
  padding-top: 15px !important;
}

.list-group-item li:first-child {
  border-top: none !important;
}

Answer 7

<ul class="First"> <li></li> <li></li> <li></li> <li></li> </ul>

如果你有这种结构，你可以通过这样的方式访问第一个孩子：

.First li：first-child {

/ 你的风格来到这里 /

}

Answer 8

我试图用不同的方式解决答案，不确定为什么第一个：孩子不工作

.list-group-item {
  padding: 6px 15px;
  border-bottom: 2px solid #DDD;
  padding-top: 15px;
}

.list-group-item:last-child{
  border-bottom: 2px solid #FFFFFF;
}

css第一个孩子不适用于我的<li> </li>

8 个答案: