[已解决]使用first-child选择器后hover无效了

mastering · 发表于 2017-9-16 21:14:31

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<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 07:52:03

本帖最后由不二如是于 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:03

本帖最后由不二如是于 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>

mastering · 发表于 2017-9-17 09:26:14

不二如是发表于 2017-9-17 07:52
为什么li鼠标移入“背景色”没有变化？

——》说明css选择器样式没有实现

感谢答复，但是li:hover{}选择器改为ul li:hover{}就可以达到想要的效果，看了下资料，first-child与hover同属伪类选择器，二者优先级相同，感觉应该是由于在ul li:first-child中使用了标签选择器，因此比li:hover优先级权重高，而改成ul li:hover{}权重就相同了

账号		自动登录	找回密码
密码			立即注册