고급 CSS 선택기를 정복하세요

저자：Eve Cole 업데이트 시간：2009-09-07 21:27:44

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 등) 및 의사 요소(예: 첫 번째 줄 등)를 계산합니다.
범용 선택기(*)의 우선순위는 0입니다.
두 선택기의 우선 순위가 동일한 경우 스타일 시트의 나중 선택기가 적용됩니다.

이해하기 쉽도록 몇 가지 예를 살펴보겠습니다.

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:첫 번째 줄 — 0, 1, 0, 2

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

#sidebar p#first { 색상: 빨간색 } — 0, 2, 0, 1;
#sidebar p:first-line { 색상: 파란색 } — 0, 1, 0, 2;

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

이를 통해 어떤 선택기가 요소에 작용하는지 쉽게 확인할 수 있습니다.

유용한 기사: