CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?
- 青灯夜游원래의
- 2021-12-14 18:50:123305검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 새로운 선택자는 무엇입니까?다음 기사：CSS3의 새로운 선택자는 무엇입니까?