WestUDY|1週間BGMプレーヤーの作成
CSSセレクタを使用してBGMプレーヤーを作成する
1番曲、2番曲、3番曲ボタンを押して欲しい曲に変更できます.1番曲、1番mp 3ファイルを画面
display:blockに出力し、残りの2番曲と3番曲をdisplay:noneに出力し、画面に出力しません.選択者
ラベルが長くなって、無数の要素の中で私の欲しい要素を見つけるのは難しいです.
선택자は、私が望んでいる要素だけを選択するのに役立ちます.簡単な選択者もいるが、複雑な選択者もいるので、正確に知ることが望ましい.使用するセレクタのタイプ
<ステータスセレクタ>
:checked checkedプロパティを持つinputを選択ex )
input:checked { } <input type="radio" checked="checked">選択
선택자1 ~ 선택자2選択者1と兄弟関係選択者2ex )
h1 ~ h2 { } <h1>첫번째</h1>
<h2>두번째</h2> <---
<h2>세번째</h2> <---선택자:nth-of-type(숫자)選択者の兄弟ラベルex )
div:nth-of-type(1)最初のdivを選択<div>first</div> <---
<div>second</div>input:nth-of-type(1) ~ div:nth-of-type(1):最初のinput兄弟のうち最初のdivを選択input:nth-of-type(1):checked ~ div:nth-of-type(1):checkedのプロパティを持つ最初のinput兄弟のうち、最初のdivを選択します.input:nth-of-type(1)
input:nth-of-type(1) ~ div:nth-of-type(1)
input:nth-of-type(1):checked ~ div:nth-of-type(1)display`プロパティを使用して、特定の要素のみを画面に出力します。
input:nth-of-type(1) {display: none;}
input:nth-of-type(1) ~ div:nth-of-type(1) {display: none;}
input:nth-of-type(1):checked ~ div:nth-of-type(1) {display: block;}htmlに適用すると？
<input id="first" type="radio" name="list" checked="checked">
<label for="first">1번곡</label>
<div> <!--checked속성을 가진 첫번째input의 첫번째div-->
<audio controls>
<source src="01.mp3" type="audio/mpeg">
</audio>
</div>
2番の曲を追加！
(第1首)
input:nth-of-type(1) {display: none;}
input:nth-of-type(1) ~ div:nth-of-type(1) {display: none;}
input:nth-of-type(1):checked ~ div:nth-of-type(1) {display: block;}input:nth-of-type(2) {display: none;}
input:nth-of-type(2) ~ div:nth-of-type(2) {display: none;}
input:nth-of-type(2):checked ~ div:nth-of-type(2) {display: block;}<input id="first" type="radio" name="list" checked="checked">
<input id="second" type="radio" name="list">
<label for="second">1번곡</label>
<label for="first">2번곡</label>
<div>
<audio controls>
<source src="01.mp3" type="audio/mpeg">
</audio>
</div>
<div>
<audio controls>
<source src="02.mp3" type="audio/mpeg">
</audio>
</div>labelにまとめるのもいいですね.たまたま2曲の歌の長さがあまり違わなかった...!
後期:複雑な選択者を使う必要はないと思います。ただし、セレクタを系統的に使用すると、エレメントを指定するときにエレメントのすべてのパスを入力する必要がなく、逆にセレクタを簡単にすることができます。
Reference
この問題について(WestUDY|1週間BGMプレーヤーの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@e2joo418/We-STUDY-1주차-01-BGM-플레이어-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol