html - css 特异性 - 没有更具体的类

Question

假设我有以下 CSS:

  .InfoTable-main-table tbody tr td:before{
    background: #222;
    color: #fff;
    content: attr(title);
    display: block;
    left: 0;
    padding: .25em .5em;
    position: absolute;
    top: 0;
    width: auto;
  }

但我想要一个更具体的 css 没有这些，即

  .InfoTable-main-table tbody tr td.extra:before{

  }

但是，之前的css仍然适用。有没有一种方法可以忽略更通用的 css，或者我是否必须降级为仅将其应用于特定类？

Answer 1

假设您要求一组应用于表格单元格的样式没有“额外”类和有类的样式，:not () 选择器似乎很合适:

.InfoTable-main-table tbody tr td:not(.extra):before{
  background: #222;
  ...
}

.InfoTable-main-table tbody tr td.extra:before{

}