使用first-child选择器后hover无效了
<html><head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul
{
list-style: none;
}
ul li:first-child
{
background-color: red;
margin: 6px 0;
}
ul li:last-child
{
background-color: red;
margin: 6px 0;
}
li:hover
{
background-color: blue;
}
</style>
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
为什么这里的li:hover不生效但是写成ul li:hover就可以了 本帖最后由 不二如是 于 2017-9-17 09:28 编辑
li:hover
为什么li鼠标移入“背景色”没有变化？
——》说明css选择器样式没有实现
原因在于这两句：
ul li:first-child
{
background-color: red;
margin: 6px 0;
}
ul li:last-child
{
background-color: red;
margin: 6px 0;
}
你可以暂时注释掉，鼠标移入后，背景色就会出来
——》这是为啥呢？
——》ul li:子尾节点的样式写法，会把li元素写“死”（权重导致），无法被修改，其实蓝色是有的，只不过永久被“挡”在下面
如果只是想设置背景色，不建议这位鱼油的后代选择器写法。（大材小用）
涉及到的优先级问题，推荐阅读：
0 1 1 5 - 进阶版Css3选择器 |【索引-总结】
直接这么写就好了：
<html>
<head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul
{
list-style: none;
}
li{
background-color: red;
margin: 6px 0;
}
li:hover
{
background-color: blue;
}
</style>
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
不二如是 发表于 2017-9-17 07:52
为什么li鼠标移入“背景色”没有变化？
——》说明css选择器样式没有实现
感谢答复，但是li:hover{}选择器改为ul li:hover{}就可以达到想要的效果，看了下资料，first-child与hover同属伪类选择器，二者优先级相同，感觉应该是由于在ul li:first-child中使用了标签选择器，因此比li:hover优先级权重高，而改成ul li:hover{}权重就相同了
页:
[1]