[TIL 03]CSS|CSSベース、セレクタ
スタイルの既定のフォーマット
div { text-align : center; }CSSの適用
内部スタイルシート
<style> </style>スタイル情報を内部にどのように格納するか<style>
div { text-align : center; }
</style>外部スタイルシート
<link>ラベルでcssファイルをロードしてスタイルを適用する方法<link href=“css파일경로” rel=“stylesheet” type=“text/css”>インラインスタイルシート
マーキング内部でのスタイル情報の指定方法<p style=“color: black”>すべての選択者
<html>のすべてのラベルのスタイルbodyラベルの要素だけでなくhtml、headにも適しています.
* { 설정내용; }ラベルセレクタ
特定のラベルに適用するスタイル
태그명 { 설정내용; }アイデンティティーセレクタ、クラスセレクタ
アイデンティティーセレクタ
タグ属性idを設定し、id値を選択者(#)クラスセレクタ
タグ属性classを設定し、class値を選択者とする(.)/* 아이디 선택자 */
#아이디명 { 설정내용; }
/* 클래스 선택자 */
.클래스명 { 설정내용; }JavaScriptのDOMはページ要素をid値としてインポートするため、コードにはエラーはありませんが、重複は許可されません.
子孫選択者
子孫
/* 후손 선택자 */
선택자 후손선택자 { 설정내용; }
/* 자손 선택자 */
선택자>자손선택자 { 설정내용; }アイソトープセレクタ
兄弟関係で後のタグを選択
선택자a+선택자b:同位選択者aの真後ろの1人のみ選択선택자a~선택자b:以上の選択者aの後ろの選択者bは全て選択はんのうセレクタ
ユーザのアクティビティに応じて変化する選択者
선택자:active:ユーザーがクリックしたラベルを選択선택자:hover:マウスのペンダントラベルを選択선택자 :active { 설정내용; }
선택자 :hover { 설정내용; }一般構造セレクタ
特定の場所のタグを選択(位置で区切る)
:first-child:兄弟関係ラベルの最初のラベル選択:last-child:兄弟関係ラベルのうち最後のラベルの選択:nth-child:兄弟関係ラベルのうち、トップ10を選択:nth-last-child:兄弟関係ラベルのうち10番目のラベルを後ろから選ぶシェイプ構造セレクタ
特定の場所のタグを選択(タグで区切る)
:first-of-type:兄弟関係ラベルの最初のラベル選択:last-of-type:兄弟関係ラベルのうち最後のラベルの選択:nth-of-type:兄弟関係ラベルのうち、トップ10を選択:nth-last-of-type:兄弟関係ラベルのうち10番目のラベルを後ろから選ぶキャラクタセレクタ
タグ内で特定の条件の文字を選択するセレクタ
선택자::first-letter:最初の文字を選択선택자::first-line:1行目선택자::after:タグの後ろのスペースを選択선택자::before:マーキング前面のスペースを選択선택자::selection:ユーザがドラッグする文字選択否定選択者
現在の選択者に逆方向に適用される選択者
他の否定的な選択プログラムや仮想要素は選択プログラムに入れません
요소:not(선택자):リバースアプリケーション選択者選択CSS優先度
ラベルスタイル->classスタイル->idスタイル->インラインスタイル->!important
右に進むほど優先度が高くなります.
Reference
この問題について([TIL 03]CSS|CSSベース、セレクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@nsunny0908/TIL-03-CSS-기초-선택자テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol