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

Question

我正在尝试简化 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>

我感觉有很多选择器聚集在一起，想知道有没有办法让它更简单。感谢您的帮助!

Answer 1

一些事情:

不要使用通用类名，例如 div .已经有一个名为 div 的元素元素.如果您想基于嵌套来定位它，请使用 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'>