如何为所有子元素设置填充

How to set padding to all children elements?

本文关键字：元素 设置 填充      更新时间：2023-09-26

我有以下标记：

<td style="__WHAT?__">
   <div class="generated-framework-class">
      <div class="generated-framework-class">
         <!-- ... -->
      </div>
   </div>
</td>

我应该在样式属性中写入什么以padding: 0px设置所有子div。我无法将此填充直接设置为这些div，因为它们是由UI-framework生成的。是否可以严格在 css 上做，没有JS？

你可以做的是在元素周围包裹另一个div。您可以使用CSS选择器"元素元素"来定义样式。

.whatever div {
  padding: 0;
  
  width: 40px;
  height: 40px;
  background: purple;
}
.whatever div div {
  padding: 0;
  
  width: 30px;
  height: 30px;
  background: beige;
}
<td>
    <div class="whatever">
       <div class="generated-framework-class">
          <div class="generated-framework-class">
             <!-- ... -->
          </div>
       </div>
    </div>
</td>

根据属性选择器，style也是一个属性，因此您可以通过[] .
所以td[style*="__WHAT?__"] div选择所有div都是具有属性style="__WHAT__"的元素td的后代。

td[style*="__WHAT?__"] div {
    padding: 0;
}
<td style="__WHAT?__">
  <div class="generated-framework-class">
    <div class="generated-framework-class">
      <!-- ... -->
    </div>
  </div>
</td>

对于反对者，请注意，由UI框架生成的元素也可以有类...

//target all .generated-framework-class inside the TD
td .generated-framework-class{
     padding:0px;
}

使用元素的 style 属性只能设置该确切元素的样式。因此，在 td 的样式属性中添加填充只会影响其自身的填充。请注意，某些 CSS 属性默认值是"继承"的，就像 color 一样，在样式标签中使用它将为整个 td 中的文本着色，因此它看起来像是级联到其他子元素，但它并不直接影响每个子元素的样式。

如果您不知道类，或者它们依赖于内容并且无法预测，则可以使用子选择器和/或星号来定位另一个元素中的每个元素。

//Use a class instead of "td" if you want to target specific elements.
td *{//Target every elements inside TD
    padding: 0;
}
td > *{//Target every direct children elements of TD
    padding: 0;
}
td div{//Target every div elements inside TD
    padding: 0;
}
td > div{//Target every direct children div of TD
    padding: 0;
}

这些选择器中的每一个都可以根据您的需要使用，也可以混合使用它们......我仍然想强调这样一个事实，即大多数 UI 框架应该使用类，并且最好使用这些类，但是有多种方法可以做同样的事情，因此您可以自由决定！

相关文章：