純粋なcssはcheckboxのcheckedスタイルを実現します

6513 ワード

純粋なcssでもcheckedスタイルを実現

今日、微信のWEUIのcheckboxを使っていると、checkboxをクリックするのはcheckedとuncheckedの変化があることに気づきましたが、checkboxのchecked状態を得ようとすると、event listenerにはそのcheckboxのclickなどのイベントがないことに気づきました.これにより,weuiは純粋なcssスタイルにすぎず,対応するコンポーネントのjsコードがないことが分かった.では問題が来て、jsイベントがなくて、weuiはどのようにcheckboxのcheckedスタイルの変化を実現しましたか?

htmlコードを見て

<div class="weui-cells weui-cells_checkbox">
    class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            "checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
            class="weui-icon-checked">
        div>
        <div class="weui-cell__bd">
            standard is dealt for u.
        div>
    
div>

私の観察によると、checkboxのchecked状態の変化はというラベルの変化によって実現されることが分かった.

weuiのcheckboxのcssがどのように書かれているか見てみましょう

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

以上、weuiでcheckboxがchecked状態にあるときのcssです.このcssのセレクタを観察します.その中の「+」はどういう意味ですか.checked'ってどういう意味ですか?contentの値は何に対応しますか?

cssセレクタの'+'は何を表しますか?

実は、「+」はを表し、栗を挙げます.最初の例では、w 3 schoolでh1 + p {margin-top:50px;}を見ることができます.この例では、h 1に続くpタグにこのcssが適用されているだけで、後ろのpタグが機能していないことがわかります.「隣の兄弟セレクタ」というセレクタの名前にも合っています.
さらに、第2の例li + li {font-weight:bold;}という例では、第2および第3のliタグのみがcssを適用し、第1は適用されなかった.これは、このcssが対象とする要素が「+」の後ろの要素であり、「+」の前後に作用しているわけではないことを示しています.この点ははっきり言っても分かるが、「+」の前後のラベルが等しい場合、例えば例2の場合、惑わされやすい.例2に戻ると、隣接する2つのliタグのうちの後者にのみ作用するため、3つの並列liタグがある場合、後の2つだけがcssを適用する

「css中:checked」ってどういう意味ですか?

w 3 schoolの説明によれば、':checked'もセレクタであり、inputがcheckedされる要素を選択するために使用されます.

contentの対応する値は何ですか?

content対応の値は事実上文字符号化であり,具体的に対応するスタイルは,自分で作成することができる.

振り返ってみるとさっきのcssコード

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

今から見れば、その意味ははっきりしている.classがweui-checkのinputがcheckedされると、直後のweui-icon-checkedを選択状態に変更し、cssスタイルは色が緑になり、内容がチェックになります.非checked状態の場合、前のcssコードが機能し、色がグレーになり、内容が空の円になります.

まとめ

純粋なcssを学び、jsを経ずにcheckboxのスタイルを変更する方法を学びました.以前はSemantic UIでcheckboxにchecked classを追加削除してスタイルの変化を実現していたが、今回は新しい世界の扉を開けた.このcss制御スタイルの変更こそ本来のやり方なのかもしれませんが、私は少し逆転しました.最近ずっと反省していて、大学院生の间にやったこれらの仕事は、开発のスピードを満たすために、すべて现时点で调べて使って、すべて后ろの原理、后ろの技术をよく考えていません.ますます「研修機関から出てきた」のようになってきました.業務ができるようになりましたが、技術の基礎が悪くて、原理を聞いても分かりません.恥ずかしくて、これも自分の原因で、暇な時に基礎を補充していません.ああ、努力しましょう.勉強は果てしなく広がっています.btw,jqはcheckboxがcheckedされているかどうかを取得する方法:$('.checkbox').is(':checked') checkedの前にコロンがあることに注意してください.

Cssセレクタ

less構文の基礎