css - :first-child over writing all of the tags within parent ?

Question

   <header>
       <div class="container">
          <a href="#" class="logo">Research Concepts | Satellite Antenna Controllers</a>
          <nav class="main-navigation">
             <ul>
                <li><a href="#" class="navigation-link">Home</a></li>
                <li><a href="#" class="navigation-link">Products/Support</a></li>
                <li><a href="#" class="navigation-link">About Us</a></li>
                <li><a href="#" class="navigation-link">Contact Us</a></li>
                <li><a href="#" class="navigation-link">News/Events</a></li>
                <li><a href="#" class="search">Search</a></li>
             </ul>
          <a href="#" class="mobile-navigation">
             <div class="icon-bar"></div>
             <div class="icon-bar"></div>
             <div class="icon-bar"></div>
          </a>
       </nav>
    </div>
 </header> 


nav {
        float: right;

        ul {
            margin: 0;
            padding: 0;

            &:after {
                content: "";
                display: block;
                clear: both;
            }

            li {
                float: left;

                a {
                    margin-left: 2.813em;
                    text-decoration: none;
                    line-height: 36px;
                    color: $black;

                    &:hover {
                        color: $maroon;
                    }

                    &:first-child {
                        margin-left: 0;
                    }
                }
            }
        }
    }

我看不出我做错了什么。我以前使用过 :first-child 伪元素，并且没有像现在这样覆盖所有其他元素的问题。

这是你们几个请求的 HTML。我希望这会有所帮助。

Answer 1

如前所述，所有 a 元素都是其父元素的第一个子元素。您需要改为选择第一个 li 元素:

nav {
    float: right;

    ul {
        margin: 0;
        padding: 0;

        &:after {
            content: "";
            display: block;
            clear: both;
        }

        li {
            float: left;

            a {
                margin-left: 2.813em;
                text-decoration: none;
                line-height: 36px;
                color: $black;

                &:hover {
                    color: $maroon;
                }

                &:first-child {
                    color: green;
                }
            }

            &:first-child a {
              margin-left: 0;
              color: pink;
            }
        }
    }
}

http://sassmeister.com/gist/37042db81ea407c76098

但是，将边距放在 li 上会更有效。

nav {
    float: right;

    ul {
        margin: 0;
        padding: 0;

        &:after {
            content: "";
            display: block;
            clear: both;
        }

        li {
            float: left;

            a {
                text-decoration: none;
                line-height: 36px;
                color: $black;

                &:hover {
                    color: $maroon;
                }
            }

            ~ li {
              margin-left: 2.813em;
              color: pink;
            }
        }
    }
}

http://sassmeister.com/gist/2138cffab2129c5eded1