CSS의 속성 선택자는 무엇입니까? 속성 선택기 사용

CSS의 속성 선택자는 무엇입니까? 이 기사에서는 CSS 속성 선택기에 대해 설명하므로 속성 선택기가 수행하는 작업과 사용 방법을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 속성 선택기란 무엇입니까? 무슨 소용이 있나요?

HTML의 요소에는 해당 동작을 표시하거나 수정하는 추가 값인 속성이 있을 수 있습니다. HTML에는 많은 속성이 포함되어 있지만 모든 속성이 모든 HTML 요소에 적용되는 것은 아닙니다. 요소와 관련되지 않은 속성은 요소에 영향을 주지 않습니다.

속성이 올바르게 적용되었는지 여부에 관계없이 CSS를 통해 선택할 수 있습니다. 그러나 웹 사이트 어디에서나 유효하지 않은 HTML 속성을 사용하는 것은 매우 나쁜 습관입니다. 브라우저마다 유효하지 않은 HTML을 다르게 해석하기 때문입니다. 사이트가 이상해 보인다고 브라우저를 비난할 수는 없습니다. 브라우저는 단지 공백을 채워서 오류 코드를 설명하려고 할 뿐입니다.

그러나 CSS 속성 선택기를 사용하면 특정 속성이나 특정 값 속성이 있는 요소를 선택할 수 있습니다. 즉, 지정된 속성 이름을 기반으로 해당 태그를 찾은 다음 속성을 설정할 수 있습니다. [추천 관련 동영상 튜토리얼: css3 튜토리얼]

css 속성 선택기 사용

html에서 속성 값은 식별자 또는 문자열이어야 합니다. 선택기의 속성 이름과 값의 대소문자 구분이 문서 언어에 따라 다르다는 점에서 사양이 다소 모호합니다. 브라우저가 일관되지 않게 동작한다는 사실 때문에 가장 안전한 방법은 사용하는 대소문자가 CSS와 HTML 간에 일관되도록 하는 것입니다.

속성 선택자는 7가지 방법으로 일치할 수 있습니다(CSS3 사양 기준).

1, []

해당 값에 관계없이 속성을 포함하는 모든 요소를 ​​찾습니다.

예:

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

css 코드 선택:

[data-colour] { 
   /* 一些性质，例：color..... */ 
}

2, [=]

속성 값이 인 모든 요소를 ​​찾습니다.

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性质 */ 
}

3. [~=]

값이 공백으로 구분된 단어 목록인 요소를 찾으려면 .

자체는 공백을 포함하거나 빈 문자열일 수 없습니다.

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { 
    /* 一些性质 */ 
}

4. [|=]

값이 정확히 로 시작하는 요소를 찾으려면 "-".

참고: "en", "en-US" 및 "en-UK"와 같은 언어 하위 코드 일치에 주로 사용됩니다.

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { 
    /* 一些性质 */ 
}

5, [^=]

하위 문자열 일치 선택기. 값이 로 시작하는 요소를 찾으려면 속성을 사용하세요.

참고: 는 빈 문자열일 수 없습니다.

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { 
    /* 一些性质 */ 
}

6, [$=]

하위 문자열 일치 선택기. 값이 로 끝나는 요소를 찾으려면 속성을 사용하세요.

참고: 는 빈 문자열일 수 없습니다.

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { 
    /* 一些性质 */ 
}

7, [*=]

하위 문자열 일치 선택기. 값에 인스턴스가 포함된 요소를 찾으려면 속성을 사용하세요.

참고: 는 빈 문자열일 수 없습니다.

<div data-colour="goblingreenish"></div>

[data-colour*="green"]{ 
    /* 一些性质 */ 
}

속성 선택기 결합

속성 선택기는 클래스 및 의사 클래스와 동일한 특정 수준을 갖습니다. 속성 선택기를 요소, 클래스 또는 ID와 같은 다른 선택기와 결합할 수 있습니다. 예:

div[data-colour="green"] {
  /* 特异性为11 */
}
.swatch[data-colour="green"] {
  /* 特异性为20 */
}
#tile25[data-colour="green"] {
  /*特异性为110 */
}

여러 속성 선택기를 결합하여 특정 패턴과 일치시킬 수도 있습니다. 예를 들어 "green"이라는 단어가 포함된 대체 텍스트가 있는 2x 이미지만 타겟팅하려는 경우 선택기는 다음과 같습니다.

img[srcset~="2x"][alt*="green"] { 
    /* 一些性质 */ 
}

또한 속성 값은 문자열로 읽혀지므로 그럴 필요가 없습니다. 클래스나 ID와는 다른 특수문자가 일치하도록 정의하세요. 이는 우리가 다음을 자유롭게 가질 수 있음을 의미합니다:

[data-emotion="

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