html - 如何简化我的CSS样式表？

我正在尝试简化CSS工作表中的CSS选择器

我有类似的东西

.table_test .div, .table_name .div, .table_company .div{
    color:black;
}


.table_test .div table input, .table_name .div table input{
    color:red;
}

我的HTML是这样的

<div class='table_test'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td>
   </tr>
  </table>
</div>

<div class='table_name'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td>
   </tr>
  </table>
</div>

我觉得有这么多选择器聚集在一起，并且想知道是否有一种方法可以使它更简单。谢谢您的帮助!

最佳答案

一些东西:

不要像div那样使用通用类名。已经有一个名为div的element元素。如果要基于嵌套定位，请使用CSS。

.table_name > div {} /* or .table_name div */

并不是...

.table_name .div {}

使用特定的选择器。 是否有原因需要您输入table_name .div table input？为什么不通过给它一个类来专门针对输入呢？

<input class="my_input">

然后:

.my_input {
  color: red;
}

最后，由您决定使用哪种样式，但是大多数人倾向于在html属性周围使用双引号。例如:
<div class="table_name">，而不是<div class='table_name'>

关于html - 如何简化我的CSS样式表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18324705/