无法用简单的HTML覆盖text-align：justify和text-align：left

我对text-align有一个奇怪的问题：在元素继承了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; }

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

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

最佳答案

好吧,这是CSS的一个非常奇怪的属性.

我在这个问题的帮助下弄清楚了：text-align justify,cannot override

显然是一个内联元素IGnorES text-align CSS,但它可以使它们无效.所以我的SPAN继承了对齐,但CSS渲染IGnorES内联元素的文本对齐CSS.

要修复它,我添加display：inline-block;我的跨度.真的,真奇怪.
我不确定如何解决Chrome开发者问题.我想它应该在技术上是一个错误？