如何简化我的CSS样式表？

Question

我想简化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>

我觉得有太多的选择器聚集在一起，想知道是否有简化它们的方法。感谢您的帮助！

- FlyingCat

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

- Mohamad

---

双引号或单引号都可以，没有关系。 - Wesley Murch

我想这是正确的，但是当你需要在属性内部使用单引号时，它确实有所不同；例如作为标题文本的一部分。 - Mohamad

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>

- mikes000

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 會在 任何你需要它的地方 起作用。

- Chris Sobolewski

---

类名如“red”和“float-left”有点违背了CSS的初衷。我确实看到人们这样做，比如使用“.blue-text {color:black !important}”等无意义的代码。 - Wesley Murch

可能是这样，但这些只是示例类名，不应该在实际中使用。我假设OP的.div是相同的。至少我希望是这样... - Chris Sobolewski