CSS：选择所有第一代元素（孩子），而不是孙子

鉴于这种无序列表：CSS：选择所有第一代元素（孩子），而不是孙子

<ul> 
    <li>Level One Item One 
    <ul> 
     <li>Level One Item One</li> 
     <li>Level One Item Two</li> 
    </ul> 
    </li> 
    <li>Level One Item Two 
    <ul> 
     <li>Level Two Item One</li> 
     <li>Level Two Item Two</li> 
    </ul> 
    </li> 
</ul>

...我想样式应用到<ul>的所有直接<li>孩子，而不必该样式应用于嵌套列表项目。

我想这个CSS选择器会做的伎俩，但它没有任何效果：

ul>li:not(li>ul>li) { 
    border: 1px solid red; 
}

这里是一个小提琴：

开玩笑的，这里是小提琴：https://jsfiddle.net/nz5fdnd0/1/

这里是所期望的结果的一个图：

所需的解决方案将避免在HTML中使用显式的类或id属性。

来源

2016-11-18 mysmallidea

你可以使用

:not(li) > ul > li { 
    border: 1px solid red; 
}

这意味着在li目标在ul的li没有包含（直接）。

所以请记住，如果在里面你添加一个div，并在那个ul li它会得到样式。

:not(li) > ul > li { 
 
    border: 1px solid red; 
 
}

<ul> 
 
    <li>Level One Item One 
 
    <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
    </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
    <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2016-11-18 02:04:18

一个解决方案，我发现是添加一个外部<div>然后瞄准的是第一个孩子：

div > ul > li { 
 
    border: 1px solid red; 
 
}

<div> 
 
    <ul> 
 
    <li>Level One Item One 
 
     <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
     </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
     <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

不幸的是，它不使用任何花哨的：没有选择啊那么这就是生活。

来源

2016-11-18 01:44:36 mysmallidea

你也可以把一个类的'ul'你想要的目标，做'UL认证。myclass> li' –

即使_“期望的解决方案可以避免在HTML中使用显式的类或id属性”_我会选择一个类，而不是为了样式的目的而引入一个封闭的'div'。但是，如果外部'ul'在分区中是_already_（always）... –

是的，这是最简单的，但源是从Markdown生成的，因此很难添加类。添加div容器很简单，所以我会继续。 – mysmallidea

-1

ul li { 
    border: 1px solid red; 
} 
ul:first-child ul li{ 
    border: none; 
}

来源

2016-11-18 01:52:03 oleeeee

不，不会返回任何元素。不错，尽管。 – mysmallidea

对不起，我认为这是你正在寻找的东西:) – oleeeee

编辑后，它实际上工作，所以这可能是一个答案。 – mysmallidea

你也可以使用

ul:not(:only-child) > li { 
    border: 1px solid red; 
}

，如果你的父母<ul>元素有兄弟姐妹这将工作。

ul:not(:only-child) > li { 
 
    border: 1px solid red; 
 
}

<ul> 
 
    <li>Level One Item One 
 
    <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
    </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
    <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2016-11-18 02:17:26 Ricky

CSS：选择所有第一代元素（孩子），而不是孙子

回答

相关问题