[CSS/DIV] 네 가지 주요 CSS 속성 값 선택기의 사용 사례를 분석하세요

이 글에서 설명해 드릴 것입니다CSS 속성 값 선택기속성 선택기의 형식은 요소 뒤에 괄호 안의 속성, 또는 h1[title], h1[title="logo"] 같은 속성 표현(설명이 맞는지 모르겠지만, 직접 만든 단어들)입니다. 이 글에서 많은 것을 배우실 수 있을 것입니다.

CSS 튜토리얼: CSS 속성 값 선택기

CSS 속성 선택기, 아마도 속성 선택기를 모르지 않을 겁니다. 본질적으로 id와 클래스 선택기는 사실 속성 값 선택기이며, 단지 ID 또는 클래스 값을 선택하면 됩니다.

속성 선택기의 형식은 요소 뒤에 괄호가 붙은 형태이며, 괄호 안에 속성이 있고, h1[title], h1[title="Logo"] 같은 속성 표현식(설명이 맞는지 모르겠지만, 직접 만든 단어들)입니다. 아래 논의에서 4가지 구체적인 형태를 볼 수 있습니다.

1. 간단한 CSS 속성 값 선택기

이름과 상관없이, 이것이 단순 속성 선택기의 특징입니다.

h1[class]{color:silver; 클래스의 값과 상관없이 클래스가 있는 모든 H1 원소에 작용합니다. 따라서 <h1class="hoopla">Hello</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"></h1> 속임수의 h1이 이 규칙의 영향을 받습니다.

물론 이 "속성"은 단순한 클래스나 id가 아니라, img의 alt, 예를 들어 img[alt]{cssdeclarationshere; alt 속성을 가진 모든 IMG 요소에 적용됩니다. 그 다음 a[href][title]{font-weight:bold; }는 어때? 아시다시피, 이 방법은 <atitle="W3CHome">W3C와 같이 href와 title 속성을 모두 가진 요소에 적용됩니다</a>.

2. 정밀 CSS 속성 값 선택기

id와 class는 본질적으로 정확한 속성 값 선택기입니다. 네, h1#logo는 h1[id="logo"]와 같습니다. 앞서 언급했듯이, 우리는 id나 class에만 국한하지 않고 어떤 속성이든 사용할 수 있습니다! 예를 들어, a[][title="W3CHome"]{font-size:200%; }는 <atitle="W3CHome">W3C에 적용됩니다</a>.

3. 일부 CSS 속성 값 선택기

이름 그대로, 속성 값이 부분적으로 일치한다면(이 경우 전체 단어와 실제로 일치하는 부분) 그 요소에 작용합니다. 예를 들어 보겠습니다:

이 중 어느 하나라도 p의 글꼴을 굵게 만들 수 있습니다.

이 선택기는 매우 유용하며, 예를 들어 제목에 문자열 "Figure"가 포함된 일러스트를 스타일링하고 싶다면, 예를 들어 title="Figure5:xxx description"을 img[title~="Figure"]를 사용할 수 있습니다.

첫 문장에서 강조했듯이, 전체 단어를 일치시켜야 하며, img[title~="Figure"]는 제목="Figure5:xxx description"과 일치하지 않습니다.

또한, 예시에서 "Figure"를 "Illustration"으로, img[title~="Figure"]를 img[title~="Illustration"]로 바꾸면, 인코딩이 GB2312든 UTF-8이든 Firefox에서 여전히 일치합니다. 중국어에 대한 CSS 지원은 나쁘지 않은 것 같습니다.

4. 특수 CSS 속성 값 선택

이 셀렉터가 좀 이상하네요. 이런 식으로 작동하는데, 예를 들어 설명하기보다 더 쉽다.

*[lang|="en"]{color:white; 이 규칙은 속성 lang 또는 en-로 시작하는 요소의 값을 선택합니다. 즉, <h1lang="en">Hello!</h1>, <plang="en-us">인사드립니다!</p>그리고 <divlang="en-au">안녕하세요!</div>그리고 일치하지 않음<plang="fr">봉주르!</p>그리고 <h3lang="cy-en">Jrooana!.</h3>