Question

无论如何使用CSS选择仅第一个后代。例如，无论如何都要从.container元素开始并设置＆lt; li class =“example”＆gt;的样式。带有蓝色边框，但不是＆lt; p class =“example”＆gt;在它里面？

我知道在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

怎么样：

li.example:first-child {border: 1px solid blue;}

Answer 3

第一个直接的孩子：

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

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

由于<ul>和目标之间存在节点，.container会增加一些复杂性。

Answer 4

如果您使用的是精确标记，为什么仅限于选择器中的.container和.example类？

.container ul > li.example会选择你想要的，虽然它不符合你的类限制。

（>是子选择器）

另一个符合您所有限制的替代方案是：

.container .example {
  border: 1px solid blue;
}

.container .example .example {
 border: none; 
}

它的局限在于它显然不会只选择第一个后代;它只是覆盖了所有非第一后代的风格。

Answer 5

最简单的方法是：

.container ul li{
    border: 1px solid blue;
}

选择第一个带有CSS的后代

5 个答案:

选择“层次结构中的第一个”

更新：以.container