gpt4 book ai didi

css - parent * :hover {} and parent:hover * {}?有什么区别

转载 作者:技术小花猫 更新时间:2023-10-29 11:55:39 25 4
gpt4 key购买 nike

我想知道 CSS 选择器之间的区别是什么。如果我要改变这个:

.parent *:hover {}

为此:

.parent:hover * {}

在后续代码中:

#child {
width: 100%;
height: 100%;
}
.parent {
background-color: green;
width: 100px;
height: 100px;
}

.parent:hover * {
background-color: red;
}
<html>
<head>
<title>HTML Sample</title>
</head>
<body>
<div class="parent">
<div id="child"></div>
</div>
</body>
</html>

没有任何变化悬停效果保持不变。我在这里错过了什么吗?

最佳答案

  • .parent *:hover {}意思是:class="parent" 定位任何元素的所有后代,处于悬停状态时”(即,当后代悬停时)

  • .parent:hover * {}表示使用class="parent" 定位任何元素的所有后代| , 而带有 class="parent" 的元素处于悬停状态(请注意,如果后代元素悬停,.parent 也会悬停,即使它们没有形成一个单一的内聚视觉单元(例如正在使用 position: absolute)。

如果您的 <div class="parent">有多个子元素,那么第一个规则 ( .parent *:hover {} ) 将只影响一个子元素 ,而 特定的元素被悬停 - 所以如果用户将鼠标悬停在另一个元素上,那么样式规则将会改变。

第二条规则是提供 .parent鼠标悬停,则所有后代的样式都将更改。这不是一个好的样式规则,因为后代选择器将选择 .parent 下的所有 (例如,每一个 <span><a><p> 等)。您可能应该使用更具体的选择器。

关于css - parent * :hover {} and parent:hover * {}?有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50755364/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com