Weird things with hyphenation-CodePudding

In Firefox, hyphenation works for both normal text and hyperlinks, for some reason that I don't understand.

Whereas I expect that since I have :not(a) pseudo-class, the selector should not affect a elements, that is, hyperlinks should not be hyphenated.

In other words, I expect that browser should understand div :not(a) as "any elements inside divs, except if such an element is a element". But it seems it doesn't work as I expect it...

Also, a side question.

Why does neither Chrome/Edge, nor Firefox hyphenation the word incomprehensibility if the first letter is uppercase?

My code:

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>

CodePudding user response：

Simply disable hyphens on a

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>