Safari unterstützt die Pseudoklasse :focus-within nicht
P粉561438407
P粉561438407 2023-09-14 13:30:52
0
1
611

<!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粉561438407

Antworte allen(1)
P粉141911244

似乎 :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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage