CS 05擬似クラス

14620 ワード
hover テキストリンク
  • は、選択するHTML要素の特殊な「状態」を指定するために使用されます.
  • 선택자:의사클래스이름 {속성: 속성값;}
  • 선택자.클래스이름:의사클래스이름 {속성: 속성값;}
  • 선택자#아이디이름:의사클래스이름 {속성: 속성값;}

    • 1.動的擬似クラス

    <head>
	<meta charset="UTF-8">
	<title>CSS Dynamic Selectors</title>
	<style>
		a:link {color: orange;}
		a:visited {color: gray;}
		a:hover {color: blue;}
		a:active {color: red;}
		div {
			background-color: orange;
			width: 300px;
			padding: 20px;
			text-align: center;
		}
		div:hover {
			background-color: blue;
			color: white;
		}
	</style>
</head>

<body>

	<h1>링크 선택자를 이용한 선택</h1>
	<p><a href="#">홈으로 가기!</a></p>
	<div>링크 선택자를 이용한 버튼 만들기!</div>

</body>

    :link

  • リンクのデフォルト状態で、ユーザはこのリンクが接続するページ
    • にアクセスしたことがない.

    :visited

  • ユーザは、このリンクを介して接続するページ
    • に一度にアクセスする.

    :hover

  • ユーザーのマウスカーソルがリンクにぶら下がっている

    • :active

  • ユーザーがマウスでリンク
    • をクリック

    :focus

  • ステータス
    • .要素はキーボードまたはマウスのイベント(イベント)またはその他の形式でフォーカス(フォーカス)として表示されます.
  • 要素がクリックまたは実行されている
    • :hoverは、正常に動作するには、linkと:アクセスを定義してから定義する必要があります.
    :activeは、通常の操作を実行するには、hoverが最初に定義した後に定義する必要があります.
    =>結論:上記の手順で動作を定義する必要があります(2,1,1)

    2.ステータス擬似クラス（UI要素states pseudo-class）


    :checked

  • input要素から選択するinput要素
    • .

    :enabled

  • input要素から使用可能なinput要素
    • を選択

    :disabled

  • input要素で使用できないinput要素
    • を選択します.

    3.構造擬似クラス


    :first-child

  • すべてのサブエレメント(child)の中から一番前のすべてのサブエレメント
    • を選択する.

    :nth-child

  • のすべてのサブエレメント(child)において、前からn番目のサブエレメントまで
    • が選択される

    :nth-last-child

  • のすべてのサブエレメント(child)において、後からn番目のサブエレメントまで
    • が選択される
  • 2 n->後ろから2,4,6...全
    • <style>
		div{ border: 3px solid #008000; }
		p:nth-last-child(2n) {
			color: red;
			font-weight: bold;
		}
	</style>

    :first-of-type

  • すべてのサブエレメントの中で最初に現れる特定のタイプのすべてのエレメント
    • を選択する.
    <head>
	<meta charset="UTF-8">
	<title>CSS Structural Selectors</title>
	<style>
		div.first{ border: 3px solid #008000; } 🔴
		div.second{ border: 3px solid #FFD700; } 🔴
		p:first-of-type {
			color: blue;
			font-weight: bold;
		}
	</style>
</head>

<body>

	<h1>:first-of-type을 이용한 선택</h1>
	<div class="first">
	      🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
		<div class="second">
	              🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
			<p>이 p 태그는 div 태그의 child 입니다!</p>
			<p>이 p 태그는 div 태그의 child 입니다!</p>
		</div>
	</div>

</body>

    :last-of-type

  • 最後に出現するすべての特定のタイプの要素
    • をすべてのサブ要素(child)で選択する

    :nth-of-type

  • すべてのサブエレメント(child)のうち、n番目のタイプのエレメント
    • をすべて選択する

    :nth-last-of-type

  • 全てのサブエレメント(child)において、後から出現するn番目の特定のタイプの全てのエレメント
    • が選択される.

    :only-child


    すべての要素のサブ要素(child)要素はにあります.

    :only-of-type

  • すべての要素の子(child)要素を選択します.特定のタイプの要素は1つしかありません.

    :empty


    サブエレメントを持たないすべてのエレメント
  • を選択

    :root

  • ドキュメントのルート要素
    • を選択
  • HTMLドキュメントでは、ルート要素は常にhtml要素
    • である.

    4.その他の医師等級


    :not

  • は、すべての選択プログラムとともに使用され、選択プログラムを逆方向に適用することによって選択されることができる
    どういう意味だ...?

    • :lang

    • を使用して、コンピュータの言語設定に基づいて特定のHTML要素を表します.
    たとえば、英語では引用符("")を引用符として、フランス語では不等号(<>)を使用します.コンピュータの言語設定に応じて、言語によって異なるタグの外観を表示できます.
    Javascriptのソートアルゴリズム
    Docker入門チュートリアル個人翻訳(2)構成、インストール、Docker環境のテスト