CSS3 속성 선택기의 새로운 기능에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS3 속성 선택기의 새로운 기능에 대한 자세한 소개

高洛峰

풀어 주다： 2017-03-07 15:08:16

원래의

1657명이 탐색했습니다.

0, 개요

CSS2에서 지원하는 속성 선택기는 [{attribute| attribute{= |= | ~=} value}]
1.[class="a"]는 class="a"
와 요소만 일치할 수 있습니다. 2.[class~="a"]는 class="a" 및 class="a b"
와 요소를 일치할 수 있습니다. 3.[lang|=en]은 lang="en" 및 lang="en-us"의 요소와 일치할 수 있습니다.

CSS3은 *=, ^= 및 $= [{속성 | 속성 {*= | ^= | $=} 값}]의 세 가지 새로운 일치 방법을 추가합니다.
1.*=은 퍼지 일치를 나타냅니다. , [href="163"]은 href="163.com", href="mail.163.com" 및 기타 요소와 일치할 수 있습니다.
2.^=는 지정된 문자인 [href^="로 시작함을 의미합니다. /" ]는 href="/a/a.htm" 및 href="/b"를 포함하는 요소와 일치합니다.
3.$=는 지정된 문자로 끝나는 것을 의미하고, [scr$=".png"]는 모든 png 이미지와 일치합니다. , 예를 들어 src="logo.png"

CSS3 속성 선택기에는 주로 다음 유형이 포함됩니다.
1.E[attr]: 속성 이름만 사용하고 속성 값을 결정하지 않습니다.
2.E[attr="value"]: 속성 이름을 지정하고, 속성의 속성 값을 지정합니다.
3.E[attr~="value"]: 속성 이름을 지정하고, 이 속성은 공백으로 구분된 단어 목록입니다. 단어 목록에는 값 단어가 포함되어 있으며 등호 앞에는 "?"가 있어야 합니다.
4.E[attr^=" value"]: 지정 속성 이름이 지정되고 속성 값이 있으며 속성 값이 value로 시작합니다.
5.E[attr$="value"]: 속성 이름이 지정되고 속성 값이 있습니다. 속성 값이고 속성 값은 value로 끝납니다.
6.E[attr*="value"]: 속성 이름이 지정되고 속성 값이 있으며 속성 값에 value;7.E[attr|="value"]: 지정됨 속성 이름이 지정되고 속성 값은 value 또는 "value-"로 시작하는 값(예: zh-cn)입니다.
1. E[attr]:

속성 선택자는 CSS3입니다. 가장 간단한 유형의 속성 선택자입니다. 속성 값이 무엇인지에 관계없이 특정 속성을 가진 요소를 선택하려면 다음 속성 선택기를 사용할 수 있습니다.

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

로그인 후 복사

여러 속성을 사용하여 요소를 선택할 수도 있습니다. 예를 들어 E[attr1][attr2]이므로 두 속성을 모두 가진 요소가 선택됩니다.

.demo a[href][title] {background: yellow; color:green;}

로그인 후 복사

참고: IE6은 이 선택기를 지원하지 않습니다.

2. E[attr="value"]:

속성 값 "value"를 지정합니다.

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

로그인 후 복사

참고: 속성 및 속성 값 특히 속성 값이

test

.demo a[class="links"]{color:red};   
.demo a[class="links item"]{color:red};

로그인 후 복사

와 같이 단어 목록 형식인 경우에는 정확히 일치해야 합니다. IE6은 이 선택기를 지원하지 않습니다.

3.E[attr~="value"]:

속성값에서 단어 목록의 단어를 기준으로 요소를 선택하려면 이 속성을 사용해야 합니다. 선택 선택기: E[attr~="value"], 이러한 종류의 속성 선택기는 속성 값이 하나 이상의 단어로 구성된 목록이라는 점입니다. 목록인 경우 공백으로 구분해야 합니다. 앞에서 언급한 E[attr="value"]는 속성 값이 완전히 일치해야 선택할 수 있다는 의미입니다. ?" 기호가 있고 다른 하나에는 "?" 기호가 없습니다.

.demo a[title~="website"]{background:orange;color:green;}

로그인 후 복사

참고: 속성 선택기에 웨이브(?)가 있는 경우 속성 값이 일치합니다. 웨이브(?)가 없는 경우에만 속성 값이 일치합니다. 그것은 완전히 가치입니다. IE6은 E[attr~="value"] 속성 선택기를 지원하지 않습니다.

4. E[attr^="value"]:

attr 속성 값이 "value"로 시작하는 모든 요소를 선택합니다. 즉, 선택한 속성에 해당 속성 값이 있습니다. "가치"로부터 시작됩니다.

.demo a[href^="http://"]{background:orange;color:green;}

로그인 후 복사

참고: IE6은 E[attr^="value"] 선택기를 지원하지 않습니다.

5. E[attr$="value"]:

E[attr$="value"] 속성 선택기는 E[attr^="value"] 선택기와 정반대입니다. , E[attr$="value"]는 attr 속성 값이 "value"로 끝나는 모든 요소를 선택한다는 의미입니다. 즉, 요소의 attr 속성을 선택하고 해당 속성 값이 value로 끝나는 것을 의미합니다. 일부 특수 링크에 배경 이미지를 추가하는 것은 매우 편리합니다. 예를 들어 pdf, png, doc 등과 같은 다양한 파일에 다양한 아이콘을 추가하려면 이 속성을 사용하면 됩니다.

.demo a[href$="png"]{background:orange;color:green;}

로그인 후 복사

참고: IE6은 E[attr$="value"] 속성 선택기를 지원하지 않습니다.

6. E[attr*="value"]:

attr 속성 값에 하위 문자열 "value"가 포함된 모든 요소를 선택합니다. 즉, 선택한 속성의 속성 값에 이 "값" 값이 있으면 해당 속성이 선택됩니다.

.demo a[title*="site"]{background:black;color:white;}

로그인 후 복사

참고: IE6은 E[attr*="value"] 선택기를 지원하지 않습니다.

7. E[attr|="value"]:

는 특정 속성 선택자라고 합니다. 이 선택자는 attr 속성 값이 value와 같거나 value-로 시작하는 모든 요소를 선택합니다.

.demo a[lang|="zh"]{background:gray;color:yellow;}

로그인 후 복사

참고: 언어를 일치시키는 데 사용되는 경우가 많습니다. IE6에서는 E[attr|="value"] 선택기를 지원하지 않습니다.

참고:
1. 속성 선택기를 지원하지 않는 IE6를 제외하고 다른 브라우저에서는 지원할 수 있습니다.
2.E[attr="value"] 및 E[attr*="value"]가 가장 실용적이며, 그 중 E[attr="value"]는 다양한 유형의 요소, 특히 양식을 찾는 데 도움이 됩니다. input[type="text"], input[type="checkbox"] 등과 E[attr*="value"]와 같은 요소 작업은 웹 사이트에서 다음과 같은 다양한 유형의 파일을 일치시키는 데 도움이 될 수 있습니다. 웹사이트의 다양한 파일 형식에 대한 링크는 웹사이트가 사용자 경험을 향상시키는 데 도움이 되도록 다양한 아이콘을 사용해야 합니다. 이전 예와 마찬가지로 이 속성을 ".doc", ".pdf", ".png" ", ".ppt"는 다양한 아이콘을 구성합니다.

CSS3에 새로 추가된 속성 선택자 기능에 대한 자세한 소개와 관련 글은 PHP 중국어 홈페이지를 주목해주세요!