const target = document.querySelector('div');

const button = document.querySelector('button');

// window 는 생략이 가능하다.
// window.document.children[0].children[1].children[1] == button
button.addEventListener('click', onChange);

function onChange() {
  target.innerHTML = '<h1>바꾼다</h1>';
}

CSS

linkとimportの違い

1.リンク方式

リンクsrc=「スタイルシート」href=「cssアドレス」

でcssドキュメントを外部からインポートおよび接続

並列接続方式

推奨方式

2.輸入方式

@import URL(「cssアドレス」)

cssのimportルールは、

を介して別のcssドキュメントをcssドキュメントにインポートします.

シリアル接続

importのcssが接続されていない場合は、接続できません.

これは

より遅い方法で、必要がなければ避けたほうがいいです.

選択者

1.デフォルトの選択者

すべての選択者:*
ラベルセレクタ:ex)liul div p...
classセレクタ:.クラス名ex).fruit
idセレクタ:#id名ex)#name

2.複合セレクタ

マッチングセレクタ:2つのセレクタex)h 1を入力します.fruit
サブセレクタ:セレクタサブセレクタを表すex)div.fruit
隣接する兄弟セレクタ:セレクタの兄弟要素ex.fruit + li
通常の兄弟選択者:選択者の兄弟要素はすべてexです.fruit + li

3.仮想選択者-1

hover:セレクタのマウスカーソルが停止したときにex)a:hover
Active:選択者のマウスをクリックするとex)a:active
focus:選択者がフォーカスするとex)input:focus

4.仮想選択者-2

セレクタ:first-child:プログラム要素の最初の選択
セレクタ:nth-child(n):セレクタ要素のn番目のex.fruit:nth-child(2)
選択者:not(要素):非選択者(要素)の選択者要素exを選択します.fruit:not(p)

5.仮想要素セレクタ

選択者::before:選択者要素の内部の前にコンテンツexを挿入します.fruit::before
セレクタ::afth:セレクタ要素の内部の後ろにコンテンツexを挿入します.fruit::after

6.属性セレクタ

ABC:属性ABCを含む要素ex)[type],[type="text"]を選択

CSS継承

1.継承の強制:継承

選択者優先度

1. !重要度-優先度が最も高い

2.インライン宣言-第2優先度ex)「style=」color:「aqua」

3.id宣言-第3優先度

4.class宣言-第4優先度

5.タグ宣言（*）-優先度5

6.完全宣言-最終優先度