4

我是 CSS 新手，我知道我遇到的问题是什么，但我不知道如何阻止它。

我有一个带有idof的元素footer，而该元素内部的另一个元素带有socialmedia. 我正在使用精灵来处理媒体图标。我遇到的问题是#footer ul lipadding( padding: 9px 0px 9px 13px) 被.socialmedia.

我尝试添加.socialmedia ul li {margin: 0px; padding: 0px;}以阻止它，我也添加了!Important但填充似乎仍然通过。

我想从社交媒体图标中删除 13px 的左侧填充，这样它们的间距就不会那么大。有人可以告诉我我做错了什么吗？

如果你想在这里看到它，我已经创建了一个 JFiddle：http: //jsfiddle.net/2Nv59/3/

HTML：

<div id="footer">
        <ul>
    <li><a href="#">Home</a></li>
            <li><a href="#">Company Overview</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Registration</a></li>
            <li><a href="#">News & Blog</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>

        <div class="FooterAddress"><strong>ABC Comp</strong><br>555 My Street.<br>Boonton, CA 07005<br>1 (800) 555-1111<br><br>

          <div class="socialmedia">
            <ul>
                <li><a href="http://facebook.com" title="Be our friend" target="_blank" class="facebook"></a></li>
                <li><a href="http://www.linkedin.com" title="Let's connect" target="_blank" class="linked"></a></li>
                <li><a href="http://www.twitter.com" title="Follow us!" target="_blank" class="twitter"></a></li>
            </ul>
          </div>

       </div>


    </div>

CSS：

/* Footer */

#footer {background-color: #3B3014; height: 150px; margin-top: 10px;}
#footer ul {padding: 0px; margin: 0px;}
#footer ul li{display: inline-block; padding: 9px 0px 9px 13px;}
#footer ul li a {text-decoration: none; color: #fff; font-weight: bold;font-size: 11px;}
#footer ul li a:hover {text-decoration: none; color: #FF6600; font-weight: bold;}
.FooterAddress {float: right; color: #FFC50B; font-size: 11px; margin-right: 13px; margin-top:-20px; text-align:right;}
.developedby {float: left; color: #fff; font-size: 11px; margin-left: 13px; margin-top: 94px;}
.developedby a {color: #FFC50B; text-decoration:none;}
.developedby a:hover {color: #CCC;cursor:hand;}

/* Soecial Media Sprites */
.nopadding {padding: 0px;float: right; color: #fff; background: #000;}
.socialmedia ul li {margin: 0px; padding: 0px;}
.socialmedia ul li a {display: block; width: 26px; height: 27px; background: url(../images/socialmedia_sprite_sm.png) no-repeat; padding: 0px;}
.socialmedia ul li:last-child {margin-right: 0;}

.socialmedia a.facebook {background-position: -27px -27px;}
.socialmedia a.facebook:hover {background-position: -27px 0;}
.socialmedia a.linked {background-position: -52px -27px;}
.socialmedia a.linked:hover {background-position: -52px 0;}
.socialmedia a.twitter {background-position: left bottom;}
.socialmedia a.twitter:hover {background-position: left top;}
4

3 回答 3

5

只是变得更具体。

改变：

.socialmedia ul li {margin: 0px; padding: 0px;}

至

#footer .socialmedia ul li {margin: 0px; padding: 0px;}

jsFiddle 示例

你有正确的想法，但#footer ul li规则更具体，所以它的 CSS 覆盖了你的其他规则。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity了解有关 CSS 特异性的更多信息

于 2013-11-01T17:23:06.873 回答
3

尝试添加#footer .socialmedia ul li {margin: 0px; padding: 0px;} 以覆盖子元素中的 css 规则，您的 css 选择器应该比您尝试覆盖的选择器更具体。

于 2013-11-01T17:23:44.170 回答
1

因为 ID 选择器比任何其他 CSS 规则具有更高的特异性，所以避免使用它会很有帮助，至少在广泛适用的选择器（如#footer ul li.

尽管提供的答案已经可以解决您的问题，但最好将您的原始选择器更改为更具体，因为您似乎不希望它的任何样式应用于社交媒体<li>。例如：

HTML

<div id="footer">
    <ul class="navigation">
        <li><a href="#">Home</a></li>
        ....

CSS

#footer .navigation li{display: inline-block; padding: 9px 0px 9px 13px;}
于 2013-11-01T17:38:04.803 回答