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'>

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 将在您需要的任何地方工作。