CSS层次结构问题
CSS层次结构问题
提问于 2021-05-02 17:06:00
所以我有这个CSS代码
.body .card .card_img:hover, <- works
.body .card .card_bg_layer:hover ~ .card_img <- does not work {
border-radius: 2px;
box-shadow: 0px 0px 18px black;
max-width: 85%;
max-height: 100%;
left: -20px;
top: -20px;
}
.body .card .card_img:hover ~ .card_bg_layer, <- works
.body .card .card_bg_layer:hover <- works {
opacity: 0.2;
}这是我的html的样子。
正如你可能知道的，当.body .card .card_bg_layer悬停时，我希望.card_img做一些事情，有人告诉我css只能下降而不能上升，虽然我毫不怀疑这是真的，但css真的有那么有限吗？
回答 1
Stack Overflow用户
发布于 2021-05-02 17:22:23
~(代字号)用作Subsequent-sibling combinator的一部分，它表示：
后续同级组合符由“代字号”(U+007E，~)字符组成，该字符分隔两个简单选择器序列。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素在由第二个序列表示的元素之前(不一定立即)。
重要的是要注意，第一个序列必须在第二个序列之前。
(在您的示例中并非如此。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67354596
复制相关文章
相似问题
腾讯云开发者
