Question

这里很棘手。

我在页面上有两个UL的样式，它们都包含锚点。

每个UL都有自己的特定ID和特定样式，这些都是正确的。

这是令人困惑的部分 - 说我有这个：

#nav {
    margin: 20px 0 0 0;
  }
    #nav li {
      float: left;

    }
      #nav li a {
        display: block;
        text-transform: uppercase;
        color: #555454;
        font-size: 14px;
        padding: 11px 17px;

      }

然后这个：

#gt-list 
    {
        margin: 10px 0 0 0;
    }
        #gt-list li, a
        {
            color: #fff;
            margin: 0 0 10px 0;
        }
            #gt-list li a:hover 
            {
                color: #ff6b00;
            }
        #gt-list li img 
        {
            float: left;
            margin: 0 15px 0 0;
            width: 20px;
        }
        #gt-list li span
        {
            float: left;
            display: inline-block;
            margin: 2px 0 0 0;

        }

以下是HTML：

<ul id="nav">
                    <li class="selected">
                        <a href="#">
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            About us
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Ways to give
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Our Work
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            News
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Learn
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Contact Us
                        </a>
                    </li>
                </ul>

以上是网站上使用的实际样式。

所以这是我的问题：#nav正在从＃gt-list中获取LI样式以及锚样式。

我已将所有父div ID插入每个UL，这没有任何影响。

我不明白这个！？！？

Answer 1

此规则中有逗号，这意味着它将应用于具有该ID和所有锚元素的所有li元素，无论它们在何处。

    #gt-list li, a

Answer 2

罪魁祸首是：

#gt-list li, a
    {
        color: #fff;
        margin: 0 0 10px 0;
    }

li和a之间的逗号会将指定的样式全局应用于a，因为它表示：
＃gt-list中的所有li和所有a 而您希望它阅读的内容是：
＃gt-list

中的所有li和a

将其更改为

#gt-list li a
    {
        color: #fff;
        margin: 0 0 10px 0;
    }

唯一ID CSS |为什么我的造型会被别处拿走？

2 个答案: