Question

故事简短我有小部件侧边栏。我的样式是这样的：

.widgets ul {padding: 10px}

现在，我希望避免在窗口小部件中填充其中一个UL，但保持所有其他UL使用10px的默认填充。

所以我试着给孩子们上课，我不想这样填充

.tabs {padding:0}

我尝试了ul.tabs，而.widgets ul.tabs似乎没有任何效果。它仍然接收填充10px。我无法为小部件内的每个UL做自定义填充。

你能告诉我我错过了什么吗？

html非常基本。

<ul class="widgets">

     <li><h2>Widget title 1</h2>
          <ul>
          ....my widget content
          </ul>
     </li>

     <li><h2>Custom widget 1</h2>
          <ul class="tabs">
          ...this one I want to have padding:0..
          </ul>
     </li>

</ul>

这就是html基本框架。我设置padding：10px到PARENT小部件ul中的任何ul但我想要特定的自定义小部件有自己的自定义样式，我不能这样做:(在这种情况下ul class = tabs

Answer 1

CSS中的“C”代表“级联”。 Learn about the cascade你会看到你的第二条规则不如第一条规则那么具体，所以第一条规则获胜。通常，具有更多类选择器的规则获胜，而#ids胜过大多数东西。

要回答你的问题，增加特异性就可以了。

.widgets ul.tabs {padding:0}

（假设.tabs确实在你所说的ul上。）

Answer 2

更具体的CSS选择器应覆盖不太具体的CSS选择器。因此，使用.widgets ul.tabs的实验应该有效。是否有可能在您测试时，您的浏览器已经缓存了早期版本，或某些此类？

这是我的示例HTML页面。首先，我按照你的方式尝试;它不起作用（因为它不应该）。然后我把它改成了这里的东西，它起作用了（在Firefox中）。

<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">

<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>

<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>

</ul>

</html>

Answer 3

dman正在谈论的代码示例：

http://jsfiddle.net/SebastianPataneMasuelli/8WRam/

（我想你可能错过了.widgets中的's'）

我很迷惑。如何以适当的方式应用CSS呢？

3 个答案: