1

css中是否有任何方法可以仅选择悬停而没有父级的容器子级，这可以使用css吗？

这就是我正在尝试的，应该选择最深的容器，而不是我添加的 .decor，它只是为了显示所选的 div。（这些孩子是动态添加的，没有类或 ID）

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

** jsFiddle **

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;
}
4

1 回答 1

0

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

就像是：

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

这是完整的jsFiddle。

于 2014-02-18T19:17:10.407 回答