CSS3의 관계 및 속성 선택기

다음은 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 공동 저술 한 "현실 세계를위한 HTML5 & CSS3, Real World, 2nd Edition"이라는 책에서 발췌 한 것입니다. 이 책은 전 세계 상점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

코어 포인트

CSS3 선택기는 웹 페이지에서 요소를 정확하게 위치시켜 이전 CSS 버전의 기능을 확장 할 수 있습니다. 관계형 선택기 및 속성 선택기는 CSS3의 주요 기능입니다. 관계 선택기는 태그의 관계에 따라 요소를 찾습니다. 여기에는 자손 콤바이너 (E F), 서브 백비네이터 (e & gt; f), 인접한 형제 셀렉터 또는 다음 형제 자매 선택기 (E F), 유니버설 형제 셀렉터 또는 후속 형제 선택기 (E ~ F)가 포함됩니다. CSS3의 속성 선택기는 요소의 속성을 기반으로 일치 할 수 있으며 CSS3은 패턴 일치를 허용하여 CSS2의 속성 선택기를 확장합니다. 여기에는 e [attr], e [attr = val], e [att * = val] * = val].

모든 최신 브라우저는 IE9 이상을 포함한 CSS3 선택기를 지원합니다. 이러한 선택기를 사용하면 웹 디자인 및 개발의 효율성과 효과를 크게 향상시킬 수 있습니다.

CSS3 Selector
• CSS 선택기는 CSS의 핵심입니다. 페이지에서 요소를 찾을 수있는 선택기가없는 경우 요소의 CSS 속성을 수정하는 유일한 방법은 요소의 스타일 속성을 사용하고 스타일 인라인을 선언하는 것입니다. 그래서 우리는 선택기를 사용합니다. 처음에 CSS는 유형, 클래스 및/또는 ID별로 일치하는 요소를 허용합니다. 이를 위해서는 클래스 및 ID 속성을 태그에 추가하여 동일한 유형의 후크와 구별 요소를 생성해야합니다. CSS2.1은 의사 요소, 의사 클래스 및 콤비네이터를 추가합니다. CSS3을 사용하면 다양한 선택기를 사용하여 페이지에서 거의 모든 요소를 ​​찾을 수 있습니다.
아래 설명에는 이전 CSS 버전으로 제공되는 선택기가 포함됩니다. CSS3 선택기를 사용할 수 있지만 CSS3보다 초기의 선택기는 CSS 선택기 레벨 3 사양의 일부이며 CSS 선택기 레벨 3이 연장되기 때문에 여전히 지원됩니다. 꽤 오랫동안 주변에 있었던 셀렉터들조차도 오래된 사양에 거의 알려지지 않은 숨겨진 보석이 있기 때문에 여기에서 검토 할 가치가 있습니다. IE9 이상을 포함한 모든 최신 브라우저는 모든 CSS3 선택기를 지원합니다.
• 관계 선택기
관계 선택기는 태그의 관계에 따라 요소를 찾습니다. 이 모든 것은 IE7에서 시작하여 다른 모든 주요 브라우저에서 지원됩니다.
• 후손 조합 (e f)

당신은 분명히 이것에 익숙해야합니다. 자손 선택기는 요소 E (자식 요소, 손자 요소, 증손자 요소 등)의 자손 인 요소 F를 찾습니다. 예를 들어, ol li는 주문 목록에 위치한 li 요소를 찾습니다. 여기에는 OL의 UL에 중첩 된 Li 요소가 포함되며, 원하는 것이 아닐 수도 있습니다.

subcombinator (e & gt; f)

이 선택기는 요소 e의 직접 자식 요소

와 같이 모든 요소 F와 일치합니다. 더 이상 중첩 된 요소는 무시됩니다. 위의 예를 계속하면 ol & gt;

이웃 형제 선택기 또는 다음 형제 선택기 (e f) 이것은 E와 동일한 상위 요소를 공유하고 태그의

바로 뒤에있는 모든 요소 F와 일치합니다. 예를 들어, Li Li는 첫 번째 Li 요소를 제외하고 주어진 컨테이너에서 모든 Li 요소를 찾습니다.

Universal Brother Selector 또는 후속 형제 선택기 (e ~ f) 이것은 약간 까다 롭습니다. 그것은 어떤 e와 동일한 상위 요소를 공유하고 태그의 뒤에있는 모든 요소 F와 일치합니다. 따라서 H1 ~ H2는 모두 동일한 직접 부모 요소를 공유하는 한 H1 이후에있는 H2와 일치합니다. 즉, H2가 다른 요소에 중첩되지 않는 한. 간단한 예를 살펴 보겠습니다 :

선택기 문자열 H1 ~ H2는 첫 번째 H2와 일치합니다. H1과 H2는 헤더의 어린이 또는 직접 후손이기 때문입니다. 다음 H2 코드 스 니펫에서 볼 수있는 H2는 부모 요소가 헤더가 아닌 기사이기 때문에 일치하지 않습니다. 그러나 헤더 ~ H2와 일치합니다. 마찬가지로, H2 ~ P는 마지막 단락과 만 일치합니다. 첫 번째 단락은 H2 이전이기 때문에 부모 요소 기사와 공유하기 때문입니다.

참고 : 왜 "부모"선택기가 없는가? 당신은 지금까지 "아버지"또는 "조상"셀렉터도 없거나 "사전 형제"셀렉터가 없음을 알 수 있습니다. 브라우저의 성능은 스타일을 적용할지 여부를 결정하기 전에 DOM 트리를 뒤로 이동하거나 중첩 요소 세트로 재귀해야하며, 기본 "Dom Tree를 위쪽으로 가로 지르는"선택기를 방해합니다.

jQuery에는 다음이 포함됩니다. 이 선택기는 CSS 선택기 레벨 4에 대해 고려되고 있지만 브라우저에서는 구현되지 않았습니다. 그것이 구현 될 때, 우리는 e : e : e : e : e : has (& gt; f)를 직접 자식 요소로 찾을 수있는 e : e : has (f)를 사용할 수 있습니다. ) 형제 F 직전에 e를 찾는 것.

HTML5 헤럴드의 스타일 시트를 찾아 보면 여러 곳에서 이러한 선택기를 사용한다는 것을 알 수 있습니다. 예를 들어, 사이트의 전체 레이아웃을 결정할 때 세 열의 DIV가 왼쪽으로 떠 다니기를 원합니다. 이 스타일을 그 안에 중첩 된 다른 div에 적용하지 않기 위해 하위 선택기를 사용합니다. 다음 몇 장에서 사이트에 새로운 스타일을 추가하면 이러한 선택기 유형이 많이 표시됩니다. 속성 선택기

CSS2는 여러 속성 선택기를 소개합니다. 이를 통해 요소의 속성에 따라 일치 할 수 있습니다. CSS3은 이러한 속성 선택기를 확장하여 패턴 매칭을 기반으로 일부 포지셔닝을 허용합니다. CSS 선택기 레벨 4 e [attr]는 속성의 값에 관계없이 모든 요소 e를 속성 att와 일치시킵니다. 우리는 4 장에서 필요한 입력을 스타일링하기 위해 사용했습니다. 최신 브라우저에서 필수 작업이지만 IE7과 IE8에서 동일한 효과가 있습니다.

e [attr = val]은 모든 요소 e와 Attribute art art와 일치하고 그 값은 val입니다. 새롭지는 않지만 양식 입력 유형을 찾을 때 유용합니다.

e [att 이것은 Lang 속성에서 가장 일반적으로 사용됩니다. 예를 들어, P [lang | = "en"]는 영국이든 미국 영어로 또는 를 사용하든 영어로 정의 된 모든 단락과 일치합니다.

e [att 예를 들어, .info [title ~ = more]는 클래스 정보와 모든 요소와 일치하며 제목 속성에는 "more"라는 단어가 포함되어 있습니다.

e [attr^= val]은 속성이 값 Val로 시작하는 모든 요소와 일치합니다. 다시 말해, Val은 속성 값의 시작과 일치합니다.

e [attr $ = val]는 attription attript attription art att가

로 끝나는 모든 요소와 일치합니다. 다시 말해, Val은 속성 값의 끝과 일치합니다.

e [att Val이 단어의 일부가 될 수 있다는 점을 제외하고는 E [attr ~ = val]과 유사합니다. 이전과 동일한 예제를 사용하여 .fakelink [title

= info] {}는 클래스 Fakelink와 모든 요소와 일치하며 Title 속성에는 "자세한 내용을 보려면 여기를 클릭하십시오"와 같은 문자열 정보가 포함됩니다.

이 속성 선택기에서 VAL의 값은 HTML의 사례에 민감한 값에 대해 사례에 민감합니다. 예를 들어, 입력 [class^= "btn"]은 클래스 이름이 사례에 민감하지만 입력 [type = "checkbox"]은 HTML에서 유형 값이 대소 문자를 사용하지 않기 때문에 CASE에 민감하기 때문에 사례에 민감합니다.

값이 영숫자 인 경우 값은 필요하지 않지만 예외가 있습니다. 빈 줄, 숫자로 시작하는 문자열, 두 개의 하이픈 및 기타 특수 사례는 따옴표로 둘러싸여 있어야합니다. 예외가 있으므로 인용문이 필요한 상황에 대한 인용문을 항상 포함하는 습관을 개발하는 것이 좋습니다.

CSS 선택기 레벨 4에서, 우리는 끝 괄호 앞에 i를 포함시킴으로써 사례 감지 성을 달성 할 수있다 [attr*= val i].

CSS3의 관계 선택기 및 속성 선택기에 대한 FAQS

CSS3의 관계 선택기와 속성 선택기의 차이점은 무엇입니까? CSS3의 관계 선택기는 HTML 문서의 다른 요소와의 관계를 기반으로 요소를 선택하는 데 사용됩니다. 예를 들어, 아동 요소, 자손, 이웃 형제 및 유니버설 형제 선택자는 모든 유형의 관계형 선택기입니다. 반면, 속성 선택기는 속성 또는 속성 값에 따라 요소를 선택하는 데 사용됩니다. 예를 들어 속성 ​​선택기를 사용하여 "텍스트"유형 속성으로 모든 입력 요소를 선택할 수 있습니다.

CSS3에서 하위 계산기를 사용하는 방법은 무엇입니까? CSS3의 하위 비전은 "& gt;"로 표시됩니다. 특정 요소의 직접 자식 요소를 선택하는 데 사용됩니다. 예를 들어, "부모"클래스를 사용하여 부모 요소의 모든 직접 자식 DIV 요소를 선택하려면 다음 CSS를 작성해야합니다.

CSS3에서 여러 속성 선택기를 사용할 수 있습니까?

예, CSS3에서 여러 속성 선택기를 사용할 수 있습니다. 이를 통해 여러 속성 조건을 충족하는 요소를 선택할 수 있습니다. 예를 들어, 유형 속성 "텍스트"및 이름 속성 "username"으로 모든 입력 요소를 선택하려면 다음 CSS를 작성해야합니다.

CSS3에서 인접한 형제 조합의 목적은 무엇입니까? .parent > div { /* CSS 属性在此处 */ } CSS3의 인접한 Brother Combiner는 ""기호로 표시됩니다. 다른 특정 요소 바로 뒤에있는 요소를 선택하는 데 사용되며 두 요소는 동일한 상위 요소를 공유합니다. 예를 들어, P 요소 바로 뒤에있는 DIV 요소를 선택하려면 다음 CSS를 작성해야합니다.

CSS3에서 특정 속성 값을 가진 요소를 선택하는 방법은 무엇입니까? CSS3에서 특정 속성 값의 요소를 선택하려면 속성 선택기, 속성 이름 및 제곱 브래킷이있는 값을 사용하십시오. 예를 들어, 유형 속성 "텍스트"로 모든 입력 요소를 선택하려면 다음 CSS를 작성해야합니다.

CSS3의 관계 선택기와 속성 선택기를 결합 할 수 있습니까?

예, CSS3의 관계 선택기와 속성 선택기를 결합 할 수 있습니다. 이를 통해 다른 요소 및 속성과의 관계에 따라 요소를 선택할 수 있습니다. 예를 들어, 입력 요소의 유형 속성이 "텍스트"인 클래스 "form"을 가진 폼 요소의 모든 직접 하위 입력 요소를 선택하려면 다음 CSS를 작성해야합니다.

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

CSS3의 범용 형제 조합은 무엇입니까?

CSS3의 범용 형제 조합은 "~"기호로 표시됩니다. HTML 문서의 순서에 관계없이 특정 요소의 형제 요소를 선택하는 데 사용됩니다. 예를 들어, P 요소의 모든 형제 자매 DIV 요소를 선택하려면 다음 CSS를 작성해야합니다.

특정 속성이없는 CSS3에서 요소를 선택하는 방법은 무엇입니까?

CSS3에 특정 속성이없는 요소를 선택하려면 다음을 사용하십시오. 예를 들어, 유형 속성이 "제출"되지 않는 모든 입력 요소를 선택하려면 다음 CSS를 작성해야합니다.

p div { /* CSS 属性在此处 */ } 의사 클래스와 함께 CSS3의 관계 선택기를 사용할 수 있습니까?

예, 의사 클래스와 함께 CSS3의 관계 선택기를 사용할 수 있습니다. 이를 통해 다른 요소 및 상태와의 관계에 따라 요소를 선택할 수 있습니다. 예를 들어, 모든 직접 아동을 선택하려면 호버링되는 내비게이션 요소의 요소를 선택하려면 다음 CSS를 작성해야합니다.

특정 값의 특정 속성을 포함하는 CSS3에서 요소를 선택하는 방법은 무엇입니까?

CSS3에 특정 값이있는 특정 속성이 포함 된 요소를 선택하려면 제곱 브래킷 특성 선택기, 속성 이름 및 값 및 *= 연산자를 사용하십시오. 예를 들어, "예제"를 포함하는 HREF 속성이있는 모든 A 요소를 선택하려면 다음 CSS를 작성해야합니다. nav > a:hover { /* CSS 属性在此处 */ }

위 내용은 CSS3의 관계 및 속성 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!