0

这里是一个棘手的问题。

我在一个都包含锚的页面上有两个 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 中，这没有影响。

这个我看不懂！？？？

4

2 回答 2

3

该规则中有一个逗号，这意味着它将应用于li具有该 id 的元素和所有锚元素下的所有元素，无论它们在哪里。

    #gt-list li, a
于 2012-08-12T23:32:37.677 回答
1

罪魁祸首是：

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

li和之间的逗号a导致指定的样式被a全局应用，因为它表示：#gt-list AND all 中的
所有lia。
而您希望它阅读的是：#gt-list 中的
所有liANDa

将其更改为

#gt-list li a
    {
        color: #fff;
        margin: 0 0 10px 0;
    }
于 2012-08-12T23:32:22.747 回答