鱼C论坛

 找回密码
 立即注册
查看: 3374|回复: 2

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

[复制链接]
发表于 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 编辑
  1. li:hover
复制代码

为什么li鼠标移入“背景色”没有变化?

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

原因在于这两句:
  1.   ul li:first-child
  2.         {
  3.             background-color: red;
  4.             margin: 6px 0;
  5.         }
  6.         ul li:last-child
  7.         {
  8.             background-color: red;
  9.             margin: 6px 0;
  10.         }
复制代码


你可以暂时注释掉,鼠标移入后,背景色就会出来

——》这是为啥呢?

——》ul li:子尾节点的样式写法,会把li元素写“死”(权重导致),无法被修改,其实蓝色是有的,只不过永久被“挡”在下面




如果只是想设置背景色,不建议这位鱼油的后代选择器写法。(大材小用)

涉及到的优先级问题,推荐阅读:
0 1 1 5 - 进阶版Css3选择器 |【索引-总结】

直接这么写就好了:
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         *
  5.         {
  6.             margin: 0;
  7.             padding: 0;
  8.         }
  9.         ul
  10.         {
  11.             list-style: none;
  12.         }

  13.         li{
  14.             background-color: red;
  15.             margin: 6px 0;
  16.         }

  17.         li:hover
  18.         {
  19.             background-color: blue;
  20.         }

  21.     </style>
  22.     <title></title>
  23. </head>
  24. <body>
  25. <ul>
  26.     <li>1</li>
  27.     <li>2</li>
  28. </ul>
  29. </body>
  30. </html>
复制代码



想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-9-17 07:52:03 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2017-9-17 09:28 编辑
  1. li:hover
复制代码

为什么li鼠标移入“背景色”没有变化?

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

原因在于这两句:
  1.   ul li:first-child
  2.         {
  3.             background-color: red;
  4.             margin: 6px 0;
  5.         }
  6.         ul li:last-child
  7.         {
  8.             background-color: red;
  9.             margin: 6px 0;
  10.         }
复制代码


你可以暂时注释掉,鼠标移入后,背景色就会出来

——》这是为啥呢?

——》ul li:子尾节点的样式写法,会把li元素写“死”(权重导致),无法被修改,其实蓝色是有的,只不过永久被“挡”在下面




如果只是想设置背景色,不建议这位鱼油的后代选择器写法。(大材小用)

涉及到的优先级问题,推荐阅读:
0 1 1 5 - 进阶版Css3选择器 |【索引-总结】

直接这么写就好了:
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         *
  5.         {
  6.             margin: 0;
  7.             padding: 0;
  8.         }
  9.         ul
  10.         {
  11.             list-style: none;
  12.         }

  13.         li{
  14.             background-color: red;
  15.             margin: 6px 0;
  16.         }

  17.         li:hover
  18.         {
  19.             background-color: blue;
  20.         }

  21.     </style>
  22.     <title></title>
  23. </head>
  24. <body>
  25. <ul>
  26.     <li>1</li>
  27.     <li>2</li>
  28. </ul>
  29. </body>
  30. </html>
复制代码



想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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{}权重就相同了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 02:31

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表