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

a：第一个孩子写的所有<a> tags within parent <div>?</div></a>

1 个答案: