最近在学习HTML + CSS,在做一个简单的滚动动画时使用ul嵌套li，在进行同一元素的css属性覆盖时，发现li:hover和ul li:hover有所区别，就来充实自己的文章列表了
一般选择器优先级id > class > 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin: 100px auto;
width: 200px;
height: 200px;
border: 1px solid red;
background-color: red;
}
li{
margin: 50px;
width:100px;
height: 100px;
background-color: black;
}
li:hover{ /*类*/
transform: scale(0.5,0.5);
}
ul li:hover{ /*标签 + 类*/
transform: scale(1.5,1.5);
}
</style>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
</html>
在测试后发现，当鼠标停在li上时li放大了1.5倍，我个人理解的是:hover是伪类，所以其权重相当于类选择器。至于选择器权重计算，文章有很多自己搜一下吧
当然，如果网页复杂的话决不会出现这样简单的写法，但如果需要进行选择器属性覆盖时，可以避免错误。
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
