Question

我有以下标记：

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

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

Answer 1

你可以做的是在元素周围包裹另一个div。您可以使用CSS Selector＆＃34;元素＆＃34;定义风格。

＆＃13;

.whatever div {
  padding: 0;
  
  width: 40px;
  height: 40px;
  background: purple;
}

.whatever div div {
  padding: 0;
  
  width: 30px;
  height: 30px;
  background: beige;
}

＆＃13;

<td>
    <div class="whatever">
       <div class="generated-framework-class">
          <div class="generated-framework-class">
             <!-- ... -->
          </div>
       </div>
    </div>
</td>

＆＃13;

Answer 2

对于downvoters，请注意UI框架生成的元素也可以包含类...

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

使用元素的style属性只能设置该精确元素的样式。因此，在td的style属性中添加填充只会影响其自己的填充。请注意，某些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框架应该使用类并且使用更好的事实那些课程，但有多种方法可以做同样的事情，所以你可以自由决定！

如何设置所有子元素的填充？

2 个答案: