为什么我的填充没有应用到我的<li>

Question

我试图在第三个名为"widget-3“的li元素周围放置一个填充，但它并没有应用填充。有人能帮我找出为什么会发生这种情况吗？

CSS

 .footer-widgets {
    width: 93.75%;
    max-width: 1000px;
    margin: 0px auto;
}

.footer-widgets li { 
    width:24%; 
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    float: left;
    padding: 0px;
}

.footer-widgets li p{ 
    width:92%;
    font-size: 1em;
    line-height: 16px;  
}

.footer-widgets li a{ 
    color: #17c3f5;
    text-decoration:none;
}

.footer-widgets li:nth-child(3) { width: 48% }
.widget-3 {background-color: #4f4c4a; border: 1px solid #666462; padding: 10px;}

.widget-3 p { width: 100% }

HTML

<footer class="clearfix">
<ul class="footer-widgets">

<li class="widget-1">
<h4>About Us</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>

<li class="widget-2">
<h4>Twitter</h4>
<p><a href="#">@ambergoodwin</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate egestas volutpat. Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 15 hours ago</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17 hours ago</p>
<p>Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 11 hours ago</p>
<strong>Follow us on Twitter</strong>
</li>

<li class="widget-3">
<h4>Services</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>
</ul>


</footer>

不确定我做错了什么让填充物不起作用？

另外，谁能告诉我为什么.widget-3 p {width: 100%}不能工作？

任何帮助都是非常感谢的。

Answer 1

填充被.footer-widgets li设置为0，它的specificity比.widget-3多。

.footer-widgets li p将宽度设置为92%，比.widget-3 p具有更高的特异性。

只需在css的末尾添加两个新声明：

li.widget-3 {padding: 10px;}
li.widget-3 p { width: 100% }

这应该可以解决这个问题。

Answer 2

您在上面声明了相同的规则，但优先级不同。

请参阅CSS规范的规则：http://www.w3.org/TR/CSS2/cascade.html

另外，有没有人能告诉我为什么.widget-3 p{

：100%}不能工作？

您没有定义父容器宽度。你的浏览器说的是"100%什么？“请参阅您对.widget-3的规则。