悬停在链接上，第一个子元素无法正常工作。

Question

悬停在链接上，第一个子元素无法正常工作。

3

我想让导航栏的第一个元素在鼠标悬停时改变其背景颜色，但是即使我写了a:first-child:hover，"Home"和"News"按钮都会改变颜色。请帮忙。

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                } 
                    #header nav ul li a:first-child:hover{
                        background-color: red;
                    }

        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

- DheltaHalo

1

这两个链接都是它们各自父元素的第一个子元素。你需要将这个伪类应用到 li 上，选择父级 ul 中的第一个 li。 - CBroe

3个回答

0

当鼠标悬停在li元素上而不是a元素上时，请尝试以下操作

<html>
    <head>
        <style>
            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                } 
                    #header nav ul li:first-child:hover a {
    background-color: red;
}

        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

- PHP Geek

0

问题在于'a'是两个'li'元素的第一个子元素，这意味着您必须在'li'上使用:first-child，然后在'a'元素上使用:hover。

            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
                padding: 2px;
                border-radius: 2px;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                }
                    #header nav ul li:first-child a:hover {
                        background-color: red;
                    }

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="#1">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

- Charlie C

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abin Thaha · Accepted Answer

:first-child 应该赋予给 li 而非 a。

因为在每个 li 中只有一个 a 子元素，但在 ul 中有多个 li。所以应该将 :first-child 赋予给 li，并将其悬停到 a 元素上。

  #header h1 {
      left: 1.25em;
      margin: 0;
      position: absolute;
  }

  #header {
      background: rgba(39, 40, 51, 0.965);
      box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

      width: 100%;
      height: 3.5em;

      left: 0;
      top: 0;

      line-height: 3.5em;
      position: fixed;    
      z-index: 100;

  }

  #header a, #header a:visited{
      color: rgba(224, 224, 224, 0.986);

      -o-transition: 0.5s;
      -ms-transition: 0.5s;
      -moz-transition: 0.5s;
      -webkit-transition: 0.5s;
      transition: 0.5s;

      font-size: 125%;
  }

  #header nav{
      position: absolute;
      right: 1em;
      top: 0;
  }
  #header nav ul li{
      display: inline-block;
      margin-left: 1em;
  } 
  #header nav ul li:first-child a:hover{
      background-color: red;
  }

<header id="header">
    <h1 id="logo"><a href="#">Random</a></h1>
    <nav id="nav">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="#2">News</a></li>
        </ul>
    </nav>
</header>