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

Question

我有一个奇怪的问题，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声明左侧属性处于活动状态的屏幕截图，但不是。

Answer 1

好的，这是CSS的一个非常奇怪的属性。

我在这个问题的帮助下找到了它：text-align justify, cannot override

显然是一个内联元素IGNORES text-align CSS，但它可以将它们包含在内。所以我的SPAN继承了对齐，但CSS渲染IGNORES内联元素的文本对齐CSS。

要解决此问题，我会将display: inline-block;添加到我的范围内。真的，真奇怪。 我不确定如何解决Chrome开发者问题。我想它在技术上应该是一个错误？

Answer 2

您可以添加property来覆盖class值，还是我错过了哪些内容？

更新： justify是内联元素，<span>适用于块文本。因此，您必须在text-align上应用display: block 或inline- block 或申请<span>，class或id的内联样式。

<p>

body {
  width: 100px;
}
p~p {
  text-align: justify;
}
p>span {
  text-align: left !important;
}
.left {
  text-align: left !important;
}

Answer 3

我认为你的选择器会让你失望。以下teachbrij.com解释得很清楚。

〜签名：

它是普通的兄弟组合器，类似于相邻的兄弟组合器。区别在于第二个选择器不必紧跟第一个选择器意味着它将选择前一个选择器之前的所有元素。

这是W3纲要。相同的信息...

我附上了更新的fiddle，其中我删除了左侧对齐。您将看到除了第一个之外，所有多个跨度都被抛出，即使没有

align: left

集。

有趣的问题肯定。希望这可以帮助。