css - 我很困惑。我怎样才能以适当的方式应用 CSS？

Question

简而言之，我有小部件侧边栏。我的风格是这样的:

.widgets ul {padding: 10px}

现在小部件中的一个 ULs 我想避免从它填充，但保持所有其他 ULs 使用 10px 的默认填充。

所以我试着给 children UL 上课，我不想像这样填充

.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 上。)