クロム（または任意のブラウザ）では、クラスを追加したり削除したりするときに、diffをCSSスタイルで表示できますか？

Question

私は次のCSS

.unfocus { 
    background-color: blue; 
    opacity: .3; 
} 

.focus { 
    opacity: 1; 
} 

を持っている場合、私は.focusで.unfocusクラスを置き換えるよう要素に変更だけでプロパティを表示する方法はありますか？

Answer 1

これを達成することができ、Googleのクロムストアの拡張があります：

：あなたはの違いを見ることができます

https://www.youtube.com/watch?v=CSQM-VwCj6E

：

https://chrome.google.com/webstore/detail/css-diff/pefnhibkhcfooofgmgoipfpcojnhhljm

は、デモビデオを参照してください。

• 要素の異なる状態（foc私たち/非フォーカス）
• は、タブ間のCSSの違いを比較
• は、私はあなたが入力要素がに焦点を合わせているかどうかに基づいて、これらのクラスをトグルしていると仮定している他の要素

Answer 2

で要素を比較？

これに最も近い機能は、Chrome devtoolsのトグル要素の状態メニューです。ボタンのタイトルは:hovです。

これをクリックすると、4つのオプションを切り替えることができます。 :focusを選択すると、以下のCSSプロパティの変更が表示されます。