집 >웹 프론트엔드 >프런트엔드 Q&A >CSS3의 세 가지 유형의 속성 선택자는 무엇입니까?

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

青灯夜游원래의: 2021-12-14 18:50:123350검색

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>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 字符串 class Attribute 选择器 https

성명：

이전 기사：CSS3의 새로운 선택자는 무엇입니까?다음 기사：CSS3의 새로운 선택자는 무엇입니까?