选择第一个带有CSS的后代

Question

无论如何,只使用CSS 选择第一个后代.例如,无论如何都要从.container元素开始并使用蓝色边框设置<li class ="example">的样式,而不是<p class ="example">吗？

我知道在CSS中有很多替代方法.但有没有办法用下面的确切代码来做到这一点？含义仅使用选择器类.container和.example,将类.container保留在下面的HTML中的确切位置,并使用下面的确切HTML标记.

<style>
    .container .example{
        border: 1px solid blue;
    }
</style>

<div>
    <div class="container">
        <ul>
            <li class="example"><p class="example"></p></li>
            <li class="example"><p class="example"></p></li>
        </ul>
    </div>
</div>

Answer 1

你的意思是"直接选择儿童"吗？

.container > ul > li

..这是你的蓝色边框:

.container > ul > li {
    border: solid 1px #00f;
}

..只使用类,你可以通过以下方式实现:

.container > * > .example{
    border: solid 1px #00f;
}

选择"第一层次结构"

css2方式(我认为仍然更强大)是添加边框.example和从中删除.example .example:

.example{
    border: solid 1px #00f;
}
.example .example{
    border: none;
}

在CSS3中,您可以这样做:

:not(.example) > .example{
    border: solid 1px #00f;
}

请注意,这也不会阻止.example > div > .example获得蓝色边框..但它保证不会.example是另一个的直接孩子.example会得到那种风格.

更新:从.container开始

怎么样.container :not(.example) > .example？

我不能用"干净"的CSS(即单一规则;没有重置等)做得更好.

not()选择器的含义是"匹配任何与选择器不匹配的项目",而不是"禁止此选择器匹配规则中的某处"..

Answer 2

第一个直系子：

.container ul > :first-child{
    border: 1px solid blue;
}

http://codepen.io/sprynm/pen/PpKBRe

这<ul>增加了一些复杂性，因为.container和 目标之间有一个节点。