小编Nel*_*son的帖子

当摆弄样本代码样式时,我发现代码的样式将覆盖我的样式,因为它们将使用更高优先级的引用(例如:.div .class> .class).

我会遇到这样的情况:

我怎样才能找出哪种风格压倒了我的风格？ 我想避免使用,!important因为最终我会陷入同样的​​境地.

编辑:我不是在问为什么会这样.我已经知道优先权,因此我提到为什么.div .class优先级高于.class.我想跟踪实际使用的内容,而不是简单地告诉我它是"不活跃的".另外,我已经了解Chrome Developer,因为屏幕截图来自Chrome Developer.

编辑:实际问题已修复,但问题仍然存在... 是否有更简单的方法来查看导致覆盖的原因？

修复:我只是按正确的顺序需要选择器. .box首先,然后.box-blue.

text-align: left在元素继承了justify属性之后,我有一个奇怪的问题.我甚至尝试使用!important关键字,它仍然无效.奇怪的是,如果我在Chrome中使用开发者模式,它表示 text-align: left处于活动状态,text-align: justify处于非活动状态,但它不会渲染左对齐.

这是我的代码:https: //jsfiddle.net/h0vx9sLc/3/ (更新了小提琴"修复")

body { width: 100px; }
p:nth-child(1) {  }
p:nth-child(2) { text-align: justify; }
p>span { text-align: left !important; }

<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>
<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>

基于CSS优先级,该justify属性的优先级确实不高于left.我在Chrome,Firefox和IE中对此进行了测试,所有人都在做同样的事情.

以下是Chrome声明左侧属性处于活动状态的屏幕截图,但事实并非如此.