如何选择正确的元素来应用CSS（准确的说是SASS）到。

Question

当我检查时，我有当前的对齐方式。元素 在我当前的页面上。

html body #root div div div div div div div div div.section-wrapper div.section-content table.selection tbody tr td span span.validate-check

当我点击最后一个时，我打算应用的那个 scss 到 span.validate-check

这是在右边的小信息 inspect 屏风

*, *::before, *::after {
    box-sizing: inherit;
}

我仍然无法通过下面的组合访问该元素。

.selection{
   ...
   tbody{
     tr{
       td{
          >span{
           background-color: red;             < === this works apply the color
           .span.validate-check {
             color: blue                      < this is what i want but not working
          }               
        }
       }
     }
   }
 }
}

我将感谢任何建议。

Answer 1

选择器是错误的

.selection{
   ...
   tbody{
     tr{
       td{
          >span{
           background-color: red;             < === this works apply the color
            .validate-check {
             color: blue;                      < remove the .span just use the class name
          }               
        }
       }
     }
   }
 }
}

检验分号

Answer 2

删除.span.validate-check中的.before span。

.selection{
   ...
   tbody{
     tr{
       td{
          >span{
           background-color: red;          
           span.validate-check {
             color: blue                      
          }               
        }
       }
     }
   }
 }
}