CSS嵌套样式疑问：外部多类元素下内部修饰类的生效问题

嘿，我来帮你搞定这个CSS样式不生效的问题，同时给你几个健壮可扩展的方案！

问题根源 #

你之前的.xml.-text选择器是在找同时拥有xml和-text类的单个元素，但你的内部<span>只有-text类——类属性不会在嵌套元素间自动继承，每个元素的类都是独立声明的——所以样式完全匹配不上。

优化方案 #

方案1：使用后代选择器实现“父类存在时生效” #

这完全符合你的需求——让内部修饰类仅在外部有xml类的元素下生效，而且不需要给内部元素加冗余类名：

/* 基础样式 */
span.xml { color: #0000CC; }
span.ind0 { margin-left: 0em; }
/* 仅在xml类元素内部的.-text生效 */
span.xml .-text { 
  color: #000000; 
  font-weight: bold; 
}

对应的HTML保持你原来的写法即可：

<span class="ind0 xml">&lt;task&gt;<span class="-text">TEXT</span>&lt;/task&gt;</span>

不管外部<span>有没有ind0或其他类，只要有xml类，内部的.-text就会应用样式，非常灵活。

方案2：贴近BEM规范的语义化命名 #

如果你想让代码更具可读性和扩展性，可以遵循BEM（块-元素-修饰符）的命名规则，把内部文本看作xml块的子元素：

/* 基础样式 */
span.xml { color: #0000CC; }
span.ind0 { margin-left: 0em; }
/* xml块下的文本子元素 */
span.xml__text { 
  color: #000000; 
  font-weight: bold; 
}

对应的HTML调整为：

<span class="ind0 xml">&lt;task&gt;<span class="xml__text">TEXT</span>&lt;/task&gt;</span>

这种方式语义更清晰，以后如果要给xml块添加其他子元素（比如属性值、注释等），都可以用xml__xxx的命名规则，扩展性极强。

对你两个问题的解答 #

• 是否可实现外部多类元素下，内部修饰类仅在外部某类存在时生效？
  当然可以！方案1的后代选择器就是干这个的——span.xml .-text精准限定了只有父元素有xml类时，内部的.-text才会生效，父元素的其他类（比如ind0）完全不影响这个规则。

• 或是应让内部类独立于外部类？
  不建议这么做。独立的类（比如直接用.text）会全局生效，很容易在其他地方引发样式冲突，破坏样式的模块化。让内部类的样式依赖于父类，能让样式的作用域更可控，也更符合现代CSS的模块化思路。

内容的提问来源于stack exchange，提问作者Gordon