CSS3 선택기 - 더미

Dummies 치트 시트 용 CSS3 부분

CSS3는 어떤 요소를 식별하기 위해 사용되는 다양한 선택기에 대한 액세스를 제공합니다 형식으로 선택기는 형식화 대상을 정의합니다. 스타일은 형식을 지정하는 방법을 정의합니다. 그러나 선택기 오버로드가 쉽습니다. 대부분의 개발자는 태그와 속성 선택자를 조합하여 모든 선택기 관련 작업을 수행합니다. 다음은 전반적인 선택 방법론을 제공하는 일반적으로 사용되는 태그 선택기입니다.

->

• 태그 , 태그 : 두 태그를 쉼표로 구분하면 문서에 나타나는 위치와 상관없이 두 태그를 모두 선택하는 것입니다. 예를 들어 p를 사용하면 div는 문서 내의 모든

  태그를 선택합니다.

• 태그 태그 : 두 개의 태그를 기호 (>)보다 큰 기호로 구분하면 다른 태그가 부모 인 태그를 브라우저가 선택하도록 지시합니다. 예를 들어

  가 있고 div> p를 사용하는 경우 브라우저는

  태그를 선택합니다.

• 태그 태그 : 두 태그를 공백으로 구분하면 브라우저가 다른 태그에 나타나는 태그를 선택합니다. 이 선택자는 첫 번째 태그가 두 번째 태그 바로 앞에 직접 나타나지 않아도된다는 것을 나타내는 큰 기호를 사용하는 것과 다릅니다. 예를 들어

  가 있고 div> p를 사용하면 브라우저에서 아무 것도 선택하지 않습니다. 그러나 div p를 대신 사용하면 브라우저가

  태그를 선택합니다.

• 태그 + 태그 : 두 태그를 더하기 기호 (+)로 구분하면 브라우저가 다른 태그 바로 뒤에 나타나는 태그를 선택합니다. 예를 들어

  가 있고 div + p를 사용하면 브라우저가

  태그를 선택합니다.

  태그가 태그 내에 나타나지 않으면 태그 뒤에 태그가 나타납니다.

• 태그 ~ 태그 : 두 개의 태그를 물결 기호 (~)로 구분하면 브라우저가 다른 태그 뒤에 나타나는 모든 태그를 선택합니다. 예를 들어

  가 있고 div ~ p를 사용하면 브라우저는

  태그를 모두 선택합니다. 이것은 div + p (브라우저가 태그 뒤에 오는 첫 번째

  태그 만 선택할 것임)와는 다릅니다.

• : 루트 : 문서의 루트 요소를 선택합니다. 루트 요소는 문서 유형에 따라 다릅니다. 이 선택기는 일반적으로 XML 문서와 함께 사용되지만 잠재적으로 모든 문서 유형과 함께 사용할 수 있습니다.

올바른 요소를 정확하게 선택하기 위해 개발자는 태그 선택자 대신 속성 선택기를 사용합니다. 다음은 개발자가 일반적으로 사용하는 속성 선택기입니다.

• . ClassName : 주어진 이름의 클래스 속성 값을 갖는 모든 객체를 선택합니다. 예를 들어,. StdPara는 오브젝트 유형에 관계없이 class = "StdPara"속성이있는 모든 오브젝트를 선택합니다.

• #Id : 주어진 이름의 id 속성 값을 가진 객체를 선택합니다. 예를 들어 #ThirdHeader는 객체 유형에 관계없이 id = "ThirdHeader"속성이있는 모든 객체를 선택합니다.

• : lang (언어 식별자) : 지정된 언어 값을 가진 개체를 선택합니다. 예를 들어,: lang (en)은 언어를 영어로 사용하는 모든 객체를 선택합니다. 다음은 공통 언어 식별자 목록입니다.

• [ 속성 ] : 속성의 값에 관계없이 특정 속성을 사용하는 모든 객체를 선택합니다. 예를 들어 [lang]은 lang 속성을 사용하는 모든 객체를 선택합니다.

• [ 특성 = 값 ] : 특정 값을 가진 특성이있는 모든 개체를 선택합니다. 값은 정확히 일치해야합니다. 예를 들어 [lang = "en-us"]는 언어 속성이 영어 인 모든 객체를 선택합니다.

• [ 특성 ~ 값 ] : 특정 값을 포함하는 특성이있는 모든 개체를 선택합니다. 검색 값은 전체 값의 어딘가에 만 나타나야합니다. 예를 들어, [title ~ = "Secondary"]는 이차 단어를 이산 단어로 포함하는 제목 속성이있는 모든 개체를 선택합니다. 이 선택기는 전체 단어로 작동합니다.

• [ 특성 | 값 ] : 특정 값으로 시작하는 특성을 갖는 모든 개체를 선택합니다. 검색 값은 전체 값의 시작 부분에 나타나야하지만 전체 값일 필요는 없습니다. 예를 들어 [title | = "Sub"]는 제목 속성이 Sub라는 단어로 시작하는 모든 객체를 선택합니다. 이 선택기는 하이픈으로 연결된 용어로 작동합니다.

• 속성 ^ = 값 ] : 특정 값으로 시작하는 속성을 갖는 모든 객체를 선택합니다. 예를 들어 [title | = "Sub"]는 제목 속성이 Sub라는 단어로 시작하는 모든 객체를 선택합니다. 이 양식의 선택자는 [Attribute | = Value] 속성보다 덜 제한적입니다. 이 양식을 사용하면 title = "SubHeader", title = "Sub Header"또는 title = "Sub-Header"와 동일한 신뢰성을 갖습니다. 속성

• $ = 값 ] : 특정 값으로 끝나는 속성을 갖는 모든 객체를 선택합니다. 예를 들어, [title $ = "Secondary"] 제목 특성이 Secondary라는 단어로 끝나는 모든 개체를 선택합니다. 이 형식의 속성은 제한이 없으며 특별한 서식을 지정할 필요가 없습니다. 속성 * =

• 값 ] : 특정 값을 포함하는 속성이있는 모든 객체를 선택합니다. 예를 들어 [title $ = "Secondary"]는 Secondary라는 단어가 포함 된 제목 속성이있는 모든 객체를 선택합니다. 이 형식의 선택기는 [ 특성 ~ 값 ] 특성보다 덜 제한적입니다. 이 양식을 사용하면 title = "SecondaryParagraph", title = "Secondary Paragraph"또는 title = "Secondary-Paragraph"와 동일한 신뢰성을 갖습니다. 특별한 not () selector는 selectors의 일반적인 배열을 완성한다.브라우저에 특정 태그 나 속성을 선택하지 말고 다른 것을 모두 선택하려면: not () 선택자를 사용하십시오. 예를 들어: not (p)는 페이지의 단락 태그를 제외한 모든 것을 선택합니다.