CSSコレクタ
13376 ワード
css
リンクコレクタ
CSSコレクタ
CSSはHTML要素のスタイルを定義します.
これを行うには、styleを適用するHTML要素を指定する必要があります.
この目的に用いられるのはコレクタです.
フルコレクタ
タグコレクタ
ラベル名:指定したラベル署名を持つ要素を選択します.
IDコレクタ
#idクエリー:一致する要素を選択するために値idクエリー値を指定します.idクエリ値は、重複できない唯一の値です.
クラスコレクタ
.class言語ツリー値:class言語ツリー値を指定して一致する要素を選択します.classer treview値は繰り返すことができます.*HTML要素で複数のスペースを指定することは、再利用に役立ちます.
「クエリー」コレクター:コレクター「クエリー=値」、指定したクエリーがあり、指定した値がクエリーの値と一致するすべての要素を選択します.
/* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
a[target="_blank"] { color: red; }/* h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소 */
h1[title~="first"] { color: red; }/* p 요소 중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */
p[lang|="en"] { color: red; }<style>
<!-- a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소 -->
a[href^="https://"] { color: red; }
</style>
<body>
<a href="https://www.test.com">https://www.test.com</a><br>
<a href="http://www.test.com">http://www.test.com</a>
</body><!DOCTYPE html>
<html>
<head>
<style>
/* a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소 */
a[href$=".html"] { color: red; }
</style>
</head>
<body>
<a href="test.html">test.html</a><br>
<a href="test.jsp">test.jsp</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
/* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */
div[class*="test"] { color: red; }
/* div 요소 중에서 class 어트리뷰트 값에 "test"를 단어로 포함하는 요소 */
div[class~="test"] { background-color: yellow; }
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>ふくごうコレクタ
バーチャルクラスコレクタ
仮想クラスコレクタは、特定の要素のステータスに基づいてスタイルを定義します.
ex)マウスが停止しているとき、リンクにアクセスしているとき、またはリンクにアクセスしていないとき、フォーカスが入っているとき
仮想クラスコレクタはポイント(.)コロン(:)を使用します.
select:pseudo-class{
property : value;
}
ex)要素コンテンツの最初または最後の文字、要素コンテンツの一番前または一番後ろ
注:https://poiemaweb.com/css3-selector
Reference
この問題について(CSSコレクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@kimwanyoung/CSS-셀렉터テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol