请问大佬们工作中css选择器写多少层合适呀？

Question

比如css样式选择器出现类似这种情况：

.mainbox .center .student-data .data ul li:first-child::after{

/* 设置样式 */

}

就比如li元素前面应该写这么多层.mainbox .center .student-data .data ul吗，从最顶层的标签开始写起有必要吗，或者说这样合适吗？

Answer 1

一般写两三层就行了，只要你的css命名遵循一定的规范。其次你可以考虑使用sass less书写css，可以使用嵌套等众多方便的语法，嵌套写好可以很好的避免这种嵌套很多层的css。

例如

// css
.main {
  color: red;
}

.main .main-wraper {
  color: red;
}

.main .main-content {
  color: red;
}

.main .main-content .main-content-item {
  color: red;
}

.main .main-content .main-content-item:hover {
  color: red;
}

.main .main-content .main-content-item:active {
  color: red;
}


// less可以修改为
.main {
  color: red;

  &-wraper {
    color: red;
  }

  &-content {
    color: red;

    &-item {
      color: red;

      &:hover {
       color: red;
      }

      &:active {
        color: red;
      }
    }
  }
}