html – 继承CSS如何阻止它？

概述我是CSS新手,我知道我遇到的问题是什么,但我无法弄清楚如何阻止它. 我有一个id为页脚的元素,另一个元素在一个社交媒体类中.我正在使用精灵来处理媒体图标.我遇到的问题是.socialmedia正在继承#footer ul li的填充(填充：9px 0px 9px 13px). 我试过添加.socialmedia ul li {margin：0px; padding：0px;}停止它,我也添加了！ 我是CSS新手,我知道我遇到的问题是什么,但我无法弄清楚如何阻止它.

我有一个ID为页脚的元素,另一个元素在一个社交媒体类中.我正在使用精灵来处理媒体图标.我遇到的问题是.socialmedia正在继承#footer ul li的填充(填充：9px 0px 9px 13px).

我试过添加.socialmedia ul li {margin：0px; padding：0px;}停止它,我也添加了！重要但是填充似乎仍然可以通过.

我想从社交媒体图标中删除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 ><strong>ABC Comp</strong><br>555 My Street.<br>Boonton,CA 07005<br>1 (800) 555-1111<br><br>          <div >            <ul>                <li><a href="http://facebook.com" title="Be our frIEnd" target="_blank" ></a></li>                <li><a href="http://www.linkedin.com" title="Let's connect" target="_blank" ></a></li>                <li><a href="http://www.twitter.com" title="Follow us!" target="_blank" ></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;}

解决方法 只是变得更具体.

更改：

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

至

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

jsFiddle example

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

总结

以上是内存溢出为你收集整理的html – 继承CSS如何阻止它？全部内容，希望文章能够帮你解决html – 继承CSS如何阻止它？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。