Heim > Fragen und Antworten > Hauptteil

Safari unterstützt die Pseudoklasse :focus-within nicht

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #my-button:focus-within {
      color: red;
    }
  </style>
</head>
<body>
  <button id="my-button" tabindex="0">item2</button>
</body>
</html>

Nach dem Drücken sollte die Farbe auf Rot wechseln. Funktioniert in Chrome und Firefox, es gibt immer Probleme mit Safari (getestet mit Version 15.6.1).

Aber was ist das Problem?

P粉561438407

P粉561438407442 Tage vor618

Antworte allen(1)Ich werde antworten

P粉141911244

P粉1419112442023-09-15 13:05:45

似乎 :focus-within 无法应用于 Safari 中的按钮。但这是有效的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #my-li:focus-within > #my-button {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li id="my-li" tabindex="0">
      <button id="my-button">item2</button>
    </li>
  </ul>
</body>
</html>

Antwort

StornierenAntwort