我想知道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,即使它们不形成单个有凝聚力的视觉单元(例如,位置：绝对正在使用).
> .parent：hover * {}表示使用class =“parent”定位任何元素的所有后代,而class =“parent”的元素处于悬停状态(请注意,如果后代元素悬停,那么.parent,即使它们不形成单个有凝聚力的视觉单元(例如,位置：绝对正在使用).
如果您的< div class =“parent”>有多个孩子然后第一个规则(.parent *：hover {})只会影响单个后代,而特定的后代是悬停的 – 所以如果用户鼠标悬停另一个元素,那么样式规则将会改变.
第二个规则就是如果.parent是鼠标悬停的话,那么所有后代都会改变它们的样式.这不是一个好的样式规则,因为后代选择器将选择.parent下的所有内容(例如,每个< span>,< a>,< p>等).您可能应该使用更具体的选择器.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
