【问题标题】:a:first-child over writing all of the <a> tags within parent <div>?a:first-child 覆盖父 <div> 中的所有 <a> 标签?
【发布时间】:2014-08-13 01:15:14
【问题描述】:
   <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。我希望这会有所帮助。

【问题讨论】:

  • 你也可以发布一些html代码吗?当:first-of-type 可能更合适时,很难判断您是否尝试做:first-child...适当的上下文将有助于澄清
  • 此代码应覆盖原始
  • @Grapho 我也试过 :first-of-type 但还是不行。
  • 检查您的 html。你所有的标签都关闭了吗?
  • 你的逻辑有问题。如果您的 a 元素是 li 元素的唯一子元素,则它始终是第一个元素。

标签: css sass css-selectors


【解决方案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

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签