Question

在css中是否有任何方法只选择没有父项的悬停的容器子项，这可能与css一起使用吗？

这就是我正在尝试的，应该选择最深的容器，而不是我刚才添加的.decor，以显示所选的div。（这些子项是动态添加的，没有类或id）

这很简单，我知道可以使用javascript轻松完成，但我想知道css中是否有选择器。

HTML

<body>
<div class=container>
    <div class=decor> </div>
</div>
<div class=container>
    <div class=decor></div>
    <div class=container>
        <div class=decor></div>
    </div>
</div>
</body>

CSS

html,body{margin:0;}
*{box-sizing:border-box;}
.container {
    position:relative;
    width:100%;
    min-height:30px;
    padding:5%;
    border:4px solid blue;
}
.decor{
    position:absolute;
    top:1%;
    right:1%;
    height:10px;
    width:10px;
    padding:0;
    background-color:green;
}
.container:hover > .decor {
    background-color:red;
}

Answer 1

在您的情况下，我认为:only-child选择器可能有用。虽然我对.decor元素感到困惑......

类似的东西：

div:hover .decor:only-child {
  background-color:red;
}

这是完整的jsFiddle。

没有父母可以在css上徘徊吗？

1 个答案: