带连字符的奇怪事物

Question

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

而我希望因为我有:not(a)伪类，所以选择器不应该影响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>