CSS 选择器与样式元素的类

【问题标题】：CSS selector vs Class for styling elementsCSS 选择器与样式元素的类
【发布时间】：2013-03-12 05:40:55
【问题描述】：

让我们看看下面的 HTML 块，

在这里，在上面的块中，我们为每个 div 使用了类。
我们也可以用CSS selectors替换classes

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

上面的 CSS chunk 也可以满足我们的要求
最佳做法是什么？说明我们可以使用selectors和classes的条件
谢谢:)

【问题讨论】：

使用类首先想到的好处是，当您插入一个新元素时，您必须重构所有后续的:nth-child() 选择器。

标签： html css coding-style

【解决方案1】：

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

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

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

总之，请记住内容和样式应该分离。使用 HTML 作为内容和结构，使用 CSS 作为样式。

【讨论】：