コネクションセレクタ

20434 ワード
CSS テキストリンク

コネクションセレクタ


サブセレクタ-指定したすべてのサブエレメントにスタイルを適用します。


サブ選択項目は、親要素に含まれるすべてのサブ要素にスタイルが適用されます.
  • 子要素および孫要素を含むすべての子要素.
  • サブセレクタを定義すると、親要素と子要素がスペースで区切られ、カッコ内で属性が指定されます.
    • 次の例では、サブセレクタを使用してsection要素のすべてのp要素に青色の文字色を指定します.
    section p{ color:blue }
    サブアイテムの破線を表示
    <style>
	#container ul {
		border: 2px dotted blue; /* #container 요소의 모든 하위 ul 요소에 파란 1px 실선 */
    margin: 5px;
	}
  
</style>
=====================================================
<body>
  <section id="container">
  <header><h1>예약 방법 및 요금</h1></header>
  <p> 요안도라에 예약하려면?
  <ul>
    <li> 예약 방법
      <ul>
        <li>직접 통화</li>
        <li>문자 남기기</li>                       
     </ul>
   </li>	 
   <li>요금 
     <ul>
        <li>1인 : 40,000원</li>
        <li>2인 : 60,000원</li>
        <li>3인 : 80,000원</li>
	  <li>4인 : 100,000원</li>   
    </ul>        
   </li>	
</ul> 
</section>
</body>

    サブセレクタ-スタイルのみをサブエレメントに適用


    スタイルはサブエレメントにのみ適用され、すべてのサブエレメントには適用されません.

  • サブセレクタは、サブエレメントにスタイルを適用するセレクタで、親エレメントと子エレメントを区別するために、2つのエレメントの間に「>」を表示します.

  • サブセレクタはサブエレメントにスタイルを適用し、サブセレクタはサブエレメントにスタイルを適用し、サブセレクタは次のエレメントとサブエレメントにスタイルを適用します.

  • 次のソースは、section要素に含まれるp要素のサブp要素にのみ青色文字を適用します.
    • section > p{ color:blue }

    隣接する兄弟セレクタ-最近の兄弟要素にスタイルを適用


    ラベルに関係があるときに含まれる要素を親要素、含まれる要素を子要素と呼ぶように、同じ親要素を持つ兄弟を兄弟関係、兄弟関係で先に現れる要素を形要素、後に現れる要素を弟要素と呼ぶ.
  • 隣接する兄弟選択子は、ドキュメント構造内の同じ親を持つ兄弟要素の最初の兄弟要素にのみ適用されます.
    • 選択者
  • を定義すると、要素1と要素2の間に「+」が表示されます.
  • 要素1と要素2は同じレベルで、スタイルは要素1の後の最初の要素2に適用されます.
    • 次の例では、h 1要素の後のp要素の最初のp要素に下線を付ける必要があります.
    h1 + p { text-decoration:underline }
    次の例では、h 1+ulセレクタを使用して、h 1タグの兄弟要素で最初に到着したul要素にスタイルを適用します.
    <!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
  h1+ul {                 /* h1 요소 다음의 첫 번째 ul 요소에 적용할 스타일 */
    color:blue;         /* 글자색 파랑 */
    font-weight:bold;     /* 글자 굵게 */
  }
</style>
</head>

<body>
  <section id="container">
  <h1>예약 방법 및 요금</h1>
  <ul>
     <li>직접 통화</li>
     <li>문자 남기기</li>                       
   </ul>
   <ul>
     <li>1인 : 40,000원</li>
     <li>2인 : 60,000원</li>
     <li>3인 : 80,000원</li>
	  <li>4인 : 100,000원</li>   
  </ul>        
</section>
</body>
</html>

    兄弟セレクタ-親要素にスタイルを適用


    兄弟セレクタは、隣接する兄弟セレクタとは異なり、すべての兄弟エレメントに適用される兄弟エレメントのスタイルも定義します.
  • 兄弟セレクタを定義すると、1番目と2番目の要素に「~」が表示されます.
    • 次の例
  • では、h 1要素の後のすべての同級p要素に下線を付ける必要がある.
    • h1 ~ p { text-decoration: underline }
    次の例では、h 1からulスタイルを定義し、h 1要素の後にあるすべての同級ul要素を青色の太字で表示します.
    <!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
h1~ul {
  color:blue;       /* 글자색 파랑 */
  font-weight:bold; /* 글자 굵게 */
}
</style>
</head>

<body>
  <section id="container">
  <h1>예약 방법 및 요금</h1>
  <ul>
     <li>직접 통화</li>
     <li>문자 남기기</li>                       
   </ul>
   <ul>
     <li>1인 : 40,000원</li>
     <li>2인 : 60,000원</li>
     <li>3인 : 80,000원</li>
	  <li>4인 : 100,000원</li>   
  </ul>        
</section>
</body>
</html>
    ロケットチュートリアル02:ミニマリストAPI
    [Python]小数点