属性セレクタ

56042 ワード

属性セレクタ-指定した属性にスタイルを適用します。

この選択者は、指定した属性を持つ要素を検索し、スタイルを適用します.

使用方法は、角カッコ([,])間で検索するプロパティを指定します.

次の例では、a"href"セレクタを使用して<a>タグのhref属性を持つ要素を検索し、背景色を指定します.
(例:5つの<a>タグが使用されているが、最初の<a>タグにはhref属性がないため、背景色は表示されない.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 width:120px;	 
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
	 a[href] {
		 background:yellow;
	 }
</style>
</head>

<body>
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#">메뉴 3</a></li>
		<li><a href="#">메뉴 4</a></li>
	</ul>
  </body>
 </html>

属性=値セレクタ-特定の値を持つ属性にスタイルを適用します。

スタイルを適用するには、アトリビュート(Attribute)フォーマットで指定したアトリビュートとアトリビュート値に一致する要素を検索することもできます.

この形式では、属性と属性の値をかっこで囲み、「不等号(=)」を付けます.

newwindowターゲット属性値がblankのリンクを検索します.次の例で使用するa[target."blank"]セレクタ:pngという名前の背景画像を表示します.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	li {
		padding: 5px 30px;
	}
		li a {
			font-size: 16px;
			color: blue;
			text-decoration: none;
		}
	 a[target="_blank"] {
		 padding-right:30px;
		 background:url(images/newwindow.png) no-repeat center right;
	 }
</style>
</head>

<body>
	<h1>HTML5 표준안 사이트 </h1>
	<ul>
		<li><a href="http://www.w3c.org/TR/html" target="_blank">HTML</a></li>
		<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
  </body>
 </html>

「属性~=値」を選択:複数の値のうち特定の値を含む属性にスタイルを適用します。

アトリビュート=値セレクタは、アトリビュートが値と完全に一致する要素を検索し、アトリビュート~=値セレクタは、複数のアトリビュート値の中から値を含む要素を選択します.

このオプションは、1つの属性に複数の属性値がある場合に、特定の属性値を検索するのに役立ちます.

classプロパティにbutton値を含む要素にスタイルを適用する

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
		.flat {
			background:blue;
			color:white;
		}
	[class ~="button"] {
		border: 2px solid black;
		box-shadow: rgba(0,0,0,0.4) 5px 5px;
	}
</style>
</head>

メニュー1

を選びます。

```
![](https://media.vlpt.us/images/jyyoun1022/post/d8b1c3c7-adc7-492a-a3e0-bcc3e4d19dfb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-01-27%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.42.31.png)

「属性｜=値」を選択-特定の値を含む属性にスタイルを適用します。

属性|=値選択プログラムは、特定の値を含む属性にスタイルを適用します.

この値は単語に一致する必要があります.

うっかりすると「属性~=値」セレクタと混同される可能性がありますが、「属性~=値」はハイフン(-)の単語にスタイルを適用しません.

[属性|=値]セレクタは、属性値が指定された値である場合、または「値-」で始まる場合、スタイルを適用します.

言い換えれば、ハイフン「-」の単語があってもスタイルが適用されます.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
	a[title |="us"] {
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title |="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
</style>
</head>

<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="us">영어</a></li>
		<li><a href="#" title="us-english">영어</a></li>
		<li><a href="#" title="japanese">일본어</a></li>
	</ul>
</body>
 </html>

「属性^=値」を選択-特定の値で始まる属性にスタイルを適用します。

選択した内容に「^」が含まれている場合は、指定した文字の先頭にある属性値にのみスタイルが適用されます.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
	a[title ^="eng"] {
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="chin"] {
		background: url(images/ch.png) no-repeat left center;
		padding: 5px 25px;
	}
</style>
</head>

<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="english">영어</a></li>
		<li><a href="#" title="japanese">일본어</a></li>
		<li><a href="#" title="chinese">중국어</a></li>
	</ul>
  </body>
 </html>

属性$=値セレクタ-特定の値で終わる属性にスタイルを適用します。

アトリビュート^=値(Attribute^=Value)がアトリビュートで指定した値の先頭にある要素にスタイルを適用した場合、アトリビュート$=値(Attribute$=Value)の選択者は、値の末尾にある要素を検索し、スタイルを指定します.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:square;
   }
		li a {
			line-height:30px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
	a[href $= "hwp"] { /* 연결한 파일의 확장자가 hwp인 링크 */
		background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
		padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
	}

	a[href $= "xls"] { /* 연결한 파일의 확장자가 hwp인 링크 */
		background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
		padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
	}
</style>
</head>

<body>
	<h3>회사 소개 파일 다운 받기</h3>
	<ul>
		<li><a href="intro.hwp">hwp 파일</a></li>
		<li><a href="intro.xls">엑셀 파일</a></li>
	</ul>
  </body>
 </html>

属性*=値セレクタ-一部の値が一致する属性にスタイルを適用します。

前述した内容では、選択者が属性値の前または後の部分をチェックします.
指定した属性値のいずれか上にこの値が含まれている場合、[属性*=値](Attribute*=Value)セレクタにスタイルが適用されます.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:circle;
   }
	li {
		padding: 5px 30px;
	}
		li a {
			font-size: 16px;
			color: blue;
			text-decoration: none;
		}
	 [href *= "w3"] {
		 background:blue;
		 color:white;		 
	 }
</style>
</head>

<body>
	<h1>HTML5 참고 사이트 </h1>
	<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
	<ul>
		<li><a href="http://www.w3c.org/TR/html">HTML 표준안 사이트</a></li>
		<li><a href="http://www.webplatform.org">튜토리얼과 아티클</a></li>	
		<li><a href="http://caniuse.com">HTML 지원 여부 체크</a></li>
		<li><a href="http://www.w3c.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
  </body>
</html>

片付けてください.
デフォルトスタイルを適用する場合、例-選択者例-適用する要素「属性」が指定された「属性」である場合、「href」<a href='#'> 메뉴1 </a>「属性=値」「値」が一致する場合、「ターゲット=「balnk」<a href =".." target="_blank"> HTML </a>[属性~=値]の複数の値に特定の「値」が含まれている場合(単語別)[class~=「button」<a href='#' class="flat button"> 메뉴4 </a>[属性l=]「値」が一致する場合、「値」(ハイフン付き)[titl=]が含まれる<a href='#' title="us" l title="us-english"> 영어 </a>[属性^=値]が「値」で始まるときに「見出し^=「eng」<a href="#" title="english"> 영어 </a>[属性$=値]「値」で終わるときに「値」で終わるとき[href$=「xls」<a href="intro.xls"> 액셀 </a>[属性*=値]「値」が属性値の一部であるとき[href*=「W 3」<a href="http://www.w3c.org/tr/html"> 사이트 </a>

Reference

この問題について(属性セレクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@jyyoun1022/속성-선택자

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Javascript——Object.prototype.hasOwnProperty()

TIL)9020金バッハ推測