如何简化我的 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'>

Answer 2

您可以创建一个相同样式的表共享的类名

CSS

.similar-table .div{
    color:black;
}


.similar-table input{
    color:red;
}

HTML

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

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

Answer 3

CSS：

.red{
  color:red;
}
.black{
  color:black;
} 

HTML：

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

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

最好的部分？这个 CSS 可以工作 wherever you need it to。