我想知道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>,等).您可能应该使用更具体的选择器.