CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

青灯夜游

풀어 주다： 2021-12-14 18:50:53

원래의

3317명이 탐색했습니다.

css3의 세 가지 속성 선택기: 1. "[속성 이름^=값]", 속성 값이 지정된 값으로 시작하는 모든 요소와 일치합니다. 2. "[속성 이름$=값]", 속성 값과 일치합니다. 3. "[속성 이름*=값]"은 속성 값에 지정된 값이 포함된 모든 요소와 일치합니다.

CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

<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>

로그인 후 복사

CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

[attribute*=value]

[attribute^=value] 선택기는 요소 속성과 일치합니다. 값은 지정된 값을 가진 요소로 시작합니다.

예:

클래스 속성 값이 "test"로 시작하는 모든 div 요소의 배경색을 설정합니다

<!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>

로그인 후 복사

CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

[attribute$=value]

속성 선택기

🎜[attribute$=value] 선택기는 속성 값이 지정된 값으로 끝나는 요소와 일치합니다. 🎜🎜예: 🎜🎜클래스 속성 값이 "test"로 끝나는 모든 요소의 배경색을 설정합니다. 🎜rrreee🎜 CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

🎜🎜🎜[attribute*=value]속성 선택기🎜🎜🎜[attribute*=value] 선택기 일치 요소 속성 값에 지정된 값이 포함된 요소입니다. 🎜🎜예: 🎜🎜클래스 속성 값에 "test"🎜rrreee🎜🎜🎜🎜가 포함된 모든 요소의 배경색을 설정합니다(학습 동영상 공유: 🎜css 동영상 튜토리얼🎜)🎜

위 내용은 CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!