CSS 참조서

CSS @규칙(RULES)

CSS 속성大全

CSS 함수(Function)CSS 선택자 전체 매뉴얼

CSS [attribute~=value] 선택자

attribute 이름으로 명명된 속성을 가진 요소를 나타내며, 이 속성은 공백으로 구분된 값을 포함하는 목록이며, [적어도] 하나의 값이 "value"와 일치합니다.

전체 CSS 선택자 참조 매뉴얼

온라인 예제

title 속성이 "flower" 단어를 포함한 모든 요소를 선택합니다

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
<style>
[title~=flower]
{
　　　　border:5px solid red;
}
</style>
</head>
<body>
<p>이미지의 title 속성에 "flower" 단어가 포함되어 있으면, 빨간 테두리로 설정됩니다.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113"　/>
<img src="img_flwr.gif" title="flowers" width="224" height="162"　/>
<img src="landscape.jpg" title="landscape" width="160" height="120"　/>
<p><b>주의:</b>만약 [<i>attribute</i>~=<i>value</i>] IE에서8　그리고 이 이전 버전에서 작동합니다. DOCTYPE는 필수로 선언해야 합니다.</p>
</body>
</html>

시험해 보세요 ‹/›

정의와 사용법

[attribute~=value] 선택자는 속성 값이 특정 단어를 포함한 요소를 선택합니다.

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저가 [attribute~=value] 선택자.

주의:[attribute~=value] IE에서8중에서 실행될 때는, 선언해야 합니다 <!DOCTYPE>.