样式应用到标签内生效，应用到标签类就失效？

Question

已经试过在标签前添加/deep/,::deep,均无效

<div class="sn">
      <el-row class="row_sn">
        <el-col class="col_sn" style="display: flex;padding:0 5px 0 5px;">
          <span style="background-color: #000000;color: white;font-weight: bold;flex: 1;">SN</span>
          <span style="flex: 1;background-color: #e0e0e0;"></span>
        </el-col>
      </el-row>
    </div>

.sn {
    width: 100%;
    display: flex;
    .row_sn{
     .col_sn{
        display: flex;
        padding:0 5px 0 5px;
        line-height: 35px;
      }
    }
  }

Answer 1

解决方案：标签嵌套关系厘清，父级标签都要给上100%的宽或高，具体数值由子级撑开。如果子级撑不开父级，检查父级宽高设置，或者用overflow，这样一般可以解决。

Answer 2

盲猜你 deep 放的元素位置不对，

以这个格式为例：Component>div.sn
div.sn 作为 slot 内容放到 Component

• CSS 作用域其实在 Component，样式应该写在 Component
• 或者在调用组件的页面，拿 Component 的顶级的样式名写 deep

还是不行就一级级 deep 下去 /deep/.a.b.c 这个比较麻烦，不过一般都能解决