Question

我有以下代码，我只想选择first child仅first child以蓝色显示的元素和fourth child为红色的最后一个子代码。
然而，大孩子也选择了这种方式，第二个孩子的孩子。第一个大孩子出现在蓝色，而其他孩子出现在红色。有没有办法我只能选择孩子而不包括孙子孙女如果有什么不清楚，请在下面发表评论，我会尽快回复提前谢谢。

＆＃13;

.parent > ul > li > ul
{
  display:none;
}
.has_children:hover > ul
{
  display:block;
}
.parent > ul :first-child
{
  color:blue;
}
.parent > ul :last-child
{
  color:red;
}

＆＃13;

<div class = "parent">
<ul>
  <li>first child</li>
  <li class = "has_children">second child
  <ul>
    <li>first grand child</li>
    <li>second grand child</li>
    <li>third grand child</li>
  </ul>
  </li>
  <li>third child</li>
  <li>fourth child</li>
</ul>
</div>

＆＃13;

Answer 1

尝试：

.parent > ul > li:first-child
{
  color:blue;
}
.parent > ul > li:last-child
{
  color:red;
}

这样，您就会选择直接位于li div的孩子li内的第一个ul和最后一个.parent。

<强> CHECK IT OUT

Answer 2

您可以使用first-child和last-child而不选择其父级。根据{{3}}：

：first-child伪类

：first-child伪类匹配第一个元素   其他元素的子元素。

但是，您不需要使用祖父母或父母来选择第一个和最后一个孩子。

li:first-child {
    background: red;
}

li:last-child {
    background: red;
}

其他解决方案：

li:nth-child(1)

li:nth-of-type(1)
li::nth-last-of-type(1)

Answer 3

您可以增加选择器并使用第一个和最后一个类型

＆＃13;

 public class UserObject
 {
    [JsonProperty(PropertyName = "/user")]
    public User _User { get; set; }

    [JsonProperty(PropertyName = "country")]
    public Country _Country { get; set; }
 }

 public class User
 {
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "firstname")]
    public string FirstName { get; set; }

    [JsonProperty(PropertyName = "lastname")]
    public string LastName { get; set; }

    [JsonProperty(PropertyName = "age")]
    public string Age { get; set; }

    [JsonProperty(PropertyName = "location")]
    public string Location { get; set; }
  }

  public class Country
  {
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "country")]
    public string Country_ { get; set; }
  }

＆＃13;

.parent > ul > li > ul
{
  display:none;
}
.has_children:hover > ul
{
  display:block;
}
.parent > ul > li:first-of-type
{
  color:blue;
}
.parent > ul > li:last-of-type
{
  color:red;
}

＆＃13;

Answer 4

试试这个

.parent > ul > li:first-child {
    color: blue;
}
.parent > ul > li:last-child {
    color: red;
}

选择列表的第一个孩子而不包括孙子女

4 个答案: