css3의 세 가지 속성 선택기: 1. "[속성 이름^=값]", 속성 값이 지정된 값으로 시작하는 모든 요소와 일치합니다. 2. "[속성 이름$=값]", 속성 값과 일치합니다. 3. "[속성 이름*=값]"은 속성 값에 지정된 값이 포함된 모든 요소와 일치합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3의 세 가지 속성 선택기
속성 선택기 | Description | 예 | 설명 예 | CSS |
---|---|---|---|---|
[ attribute ^=value] | 모든 요소 일치 속성 값이 지정된 값으로 시작하는 항목 | a[src^="https"] | src 속성 값이 "https" | 3 |
[attribute $=value]으로 시작하는 모든 요소를 선택하세요. | 속성 값이 지정된 값으로 끝나는 모든 요소와 일치 | a[src$=".pdf"] | src 속성 값이 ".pdf" | 3 |
[attribute *=value] | 속성 값에 지정된 값이 포함된 모든 요소를 일치시키세요 | a[src*="44lan"] | 각 src 속성의 하위 항목을 포함하는 값 선택 문자열 "44lan"의 요소 | 3 |
[attribute^=value]
속성 선택기[attribute^=value]
属性选择器
[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。
示例:
设置class属性值以"test"开头的所有div元素的背景颜色
<!DOCTYPE html> <html> <head> <style> div[class^="test"] { background:#ffff00; } </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>
<strong>[attribute$=value]</strong>
属性选择器
[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。
示例:
设置class属性值以"test"结尾的所有元素的背景颜色:
<!DOCTYPE html> <html> <head> <style> [class$="test"] { background:#ffff00; } </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>
[attribute*=value]
<!DOCTYPE html> <html> <head> <style> [class*="test"] { background:#ffff00; } </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.</div> </body> </html>
[attribute*=value]
속성 선택기🎜🎜🎜[attribute*=value] 선택기 일치 요소 속성 값에 지정된 값이 포함된 요소입니다. 🎜🎜예: 🎜🎜클래스 속성 값에 "test"🎜rrreee🎜🎜🎜🎜가 포함된 모든 요소의 배경색을 설정합니다(학습 동영상 공유: 🎜css 동영상 튜토리얼🎜)🎜위 내용은 CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!