要素間の関係

学習日:2021.06.24

エンコーディング

入力a[href="#"] tab結果

<a href="#"></a>

a태그aユニットはリンクボタンである.
aタグのtargetプロパティは、新しいウィンドウに表示されるかどうかを決定します.
hrefプロパティは、移動するアドレスです.
入力a[href="#"][age="123"][name="paul"]*10 tab結果

<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>
<a href="#" age="123" name="paul"></a>

入力
1. a[href="#"][target="_blank"]{네이버로 이동}2.맥OS行を選択command+shift+방향키1行目の状態でtabキーを押してもだめです.tabキーを再入力してください.
3. command + X & command + V & tab4.修正する部分を修正する
結果

<a href="#" target="_blank">네이버로 이동</a>
<a href="#" target="_blank">다음로 이동</a>
<a href="#" target="_blank">구글로 이동</a>

兄弟選択者

div+section兄弟関係
要素の間に空白がないようにするdiv:+左側位置/隣接セレクタsection:+右側位置/隣接妹選択者
入力a[href="#"][target="_blank"]{네이버로이동}+br+a[href="#"][target="_blank"]{다음으로이동}+br+a[href="#"][target="_blank"]{구글로이동} + tab結果

<a href="#" target="_blank">네이버로이동</a>
<br>
<a href="#" target="_blank">다음으로이동</a>
<br>
<a href="#" target="_blank">구글로이동</a>

br태그これは改行です.

親&子セレクタ

>:サブセレクタ
入力div>section*2>nav + tab結果

<div>
  <section>
    <nav></nav>
  </section>
  <section>
    <nav></nav>
  </section>
</div>

<!-- 이 div는 a의 부모 엘리먼트 이다. -->
<div>
  <!-- 이 a는 div의 자식 엘리먼트 이다. -->
  <a href="#">네이버</a>
</div>
<section>
  <a href="#">구글</a>
</section>

子孫選択者

:子孫選択者(スペース1)

<section>
  <a href="#">구글</a>
</section>

section a:section 요소のa 요소この場合、サブセレクタsection > aを使用することができる
選択者が長いと優先度が高い

section a {
  color:red;
}

/* 이 CSS 는 무시된다. */
a {
  color:pink;
}

/* 이 CSS 는 적용된다. - 나중에 작성된 css가 적용된다 */
a {
  color:green;
}