带连字符的奇怪事物

Question

在 Firefox 中，连字符对普通文本和超链接都有效，出于某种我不明白的原因。

而我希望因为我有 :not(a) 伪 class，所以选择器不应影响 a 元素，也就是说，超链接不应使用连字符。

换句话说，我希望浏览器应该将 div :not(a) 理解为“div 中的任何元素，除非这样的元素是 a 元素”。但似乎并没有像我预期的那样工作...

还有一个附带问题。

如果首字母大写，为什么 Chrome/Edge 和 Firefox 都不对单词 incomprehensibility 进行断字？

我的代码：

body {
  outline: 1px solid red;
  width: 5em;
}

div :not(a) {
  hyphens: auto;
}

a {
  overflow-wrap: break-word;
  word-break: break-word;
}

<div>
  <p lang="en-US">
    incomprehensibility incomprehensibility incomprehensibility
    <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a>
    incomprehensibility
  </p>
</div>

Answer 1

只需在 a

上禁用 hyphens

body {
  outline: 1px solid red;
  width: 5em;
}

div {
  hyphens: auto;
}

a {
  hyphens: initial; /* this */
  overflow-wrap: break-word;
  word-break: break-word;
}

<div>
  <p lang="en-US">
    incomprehensibility incomprehensibility incomprehensibility
    <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a>
    incomprehensibility
  </p>
</div>

带连字符的奇怪事物

Weird things with hyphenation

css

pseudo-class

css-hyphens