CSS 고급 선택기에 대한 자세한 설명

CSS는 웹 디자이너가 사용할 수 있는 가장 강력한 도구 중 하나입니다. 이를 사용하면 페이지 태그를 변경하지 않고도 몇 분 안에 웹사이트의 인터페이스를 변경할 수 있습니다. 그러나 우리 각자가 이것이 유용하다는 것을 알고 있음에도 불구하고 CSS 선택기는 잠재력을 발휘하지 못하고 때로는 과도하고 쓸모없는 클래스, ID, div, 범위 등을 사용하는 경향이 있습니다. 우리 HTML은 매우 지저분합니다.

이러한 "전염병"이 태그에 퍼지는 것을 방지하고 태그를 깔끔하고 의미 있게 유지하는 가장 좋은 방법은 추가 클래스나 ID를 사용하지 않고 특정 요소를 타겟팅할 수 있는 더 복잡한 CSS 선택기를 사용하는 것입니다. 코드와 스타일이 더 유연해졌습니다.

CSS 우선순위

고급 CSS 선택기 영역을 살펴보기 전에 선택기를 적절하게 사용하고 해결하기 쉬운 일부 문제를 디버깅하는 데 많은 시간을 낭비하지 않도록 CSS 우선순위의 작동 방식을 이해하는 것이 중요합니다. 우선순위에 주의를 기울이는 한

CSS를 작성할 때 캐스케이드의 다른 선택자보다 높은 일부 선택자에 주의해야 합니다. 선택자는 우리가 작성한 이전 스타일을 반드시 덮어쓰지는 않습니다. 동일한 요소.

그럼 지정된 선택기의 우선순위를 어떻게 계산하나요? 우선 순위가 1, 1, 1, 1 또는 0, 2, 0, 1과 같이 쉼표로 구분된 4개의 숫자로 표현된다는 점을 고려하면 매우 간단합니다.

스타일 속성이 아닌 한 첫 번째 숫자(a)는 일반적으로 0입니다.

두 번째 숫자(b)는 선택기의 ID 수의 합입니다.

세 번째 숫자(c)는 선택기에 사용되는 다른 속성입니다. 선택기와 의사 클래스의 합입니다. . 여기에는 클래스(.example) 및 속성 선택기(예: li[id=red])가 포함됩니다.

네 번째 숫자(d)는 요소(예: 테이블, p, div 등) 및 의사 요소(예: first)를 계산합니다. -line 등);

범용 선택기(*)의 우선순위는 0입니다.

두 선택기의 우선순위가 같을 경우 스타일 시트에서 더 늦은 선택기가 적용됩니다.

더 쉽게 이해할 수 있도록 몇 가지 예를 살펴보겠습니다.

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0, 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

아래 예에서 첫 번째 항목은 두 번째 항목보다 우선순위가 높기 때문에 작동합니다.

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

중요함 우선순위가 어떻게 작동하는지 최소한 기본적으로 이해하는 것이 좋지만, Firebug와 같은 일부 도구는 특정 요소를 검토할 때 선택기 우선순위에 따라 모든 CSS 선택기 쌍을 나열하여 특정 요소에서 무슨 일이 일어나고 있는지 알려주는 것이 유용합니다. 어떤 선택자가 유효한지 확인합니다.

다음 예에서는 nth-child, first-child, last-child, nth-of-type, first-of-type 및 last-of-type의 사용을 주로 설명합니다.

샘플 코드:

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

요약:

첫 번째 하위 선택기가 IE7+ 이상과 호환되는 것을 제외하고, 다른 선택기는 호환되려면 IE9 이상의 브라우저가 필요합니다.

위 내용은 CSS 고급 선택기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!