回答編集履歴
2
linkify
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Google Chrome の DevTools で対象の要素を選択して、右の Styles の :hov をクリック、:focus と :focus-visible にチェックを入れます。下を見ると、問題の「outline: none;」に打ち消し線が引かれているはずです。そのルールセットより上で `outline` プロパティを指定しているルールセットを探します。
|
|
4
4
|
|
|
5
|
-
おそらく、有効になっているルールセットの方が、打ち消されているルールセットより
|
|
5
|
+
おそらく、有効になっているルールセットの方が、打ち消されているルールセットより[セレクタ詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)が高いはずです。これを直すには、セレクタの詳細度を上げます。この例では `.input` を `.input:focus-visible` にすれば詳細度で勝てるようになります。
|
|
6
6
|
|
|
7
7
|
`!important` を指定するのも手ですが、それが効かなかったということは他のルールセットでも `!important` が付いているのでしょう。
|
|
8
8
|
|
1
.
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
問題を再現できないので原因を知りようがないですが、どうやって調べるかを紹介します。
|
|
2
2
|
|
|
3
|
-
Google Chrome の DevTools で対象の要素を選択して、右の Styles の :hov をクリック、:focus と :focus-visible にチェックを入れます。下を見ると、「outline: none;」に打ち消し線が引かれているはずです。その
|
|
3
|
+
Google Chrome の DevTools で対象の要素を選択して、右の Styles の :hov をクリック、:focus と :focus-visible にチェックを入れます。下を見ると、問題の「outline: none;」に打ち消し線が引かれているはずです。そのルールセットより上で `outline` プロパティを指定しているルールセットを探します。
|
|
4
4
|
|
|
5
5
|
おそらく、有効になっているルールセットの方が、打ち消されているルールセットより**セレクタ詳細度が高いはず**です。これを直すには、セレクタの詳細度を上げます。この例では `.input` を `.input:focus-visible` にすれば詳細度で勝てるようになります。
|
|
6
6
|
|