html - 样式元素的 CSS 选择器与类

Question

让我们看看下面的 HTML block ，

这里，在上面的代码块中，我们为每个 div 使用类。
我们还可以将 classes 替换为 CSS 选择器

     .first{
      /*  some styles  */
      }
      .first:nth-child(1){
      /*  some styles  */
      }
      .first div:nth-child(1){
      /*  some styles  */
      }

上面的CSS chunk也可以满足我们的要求
最佳做法是什么？解释我们可以使用选择器和类
的条件谢谢:)

Answer 1

我认为当样式与元素的位置相关时，最好使用 CSS 选择器样式，否则使用类。

比如表格每一行的背景与位置相关，比如第一行红色，第二行绿色，第三行蓝色，第四行红色，第六行绿色线等。在这种情况下最好使用像 :nth-child(3n+1) 这样的 CSS 选择器，这样你就不需要写像 class='red' 这样的额外信息> 在 HTML 中，这是一种不好的做法，因为如果您想稍后使用四种颜色，则很难更改。

但是如果表格线条的背景是由它们的值决定的，比如说，红色代表小于 0 的值，绿色代表大于 0 的值，蓝色代表 0。你可能会发现很难在 CSS 选择器中表达这一点所以添加 class='lz0' 可能是明智之举。

总而言之，请记住内容和样式应该分离。将 HTML 用于内容和结构，将 CSS 用于样式。