CSS 선택자 세부정보

CSS3 기본 선택기

문제를 더 잘 설명하기 위해 먼저 다음과 같이 간단한 DOM 구조를 만듭니다.

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

1. 와일드카드 선택기(*)
와일드카드 선택기는 모든 요소 또는 특정 요소 아래의 모든 요소를 ​​선택하는 데 사용됩니다. 예를 들면 다음과 같습니다.

코드는 다음과 같습니다.
*{ marigin: 0; padding: 0; }
리셋 스타일 파일에서 위의 코드를 많이 보셨을 것입니다. 모든 요소의 여백과 패딩이 모두 0으로 설정된다는 것입니다. 다른 하나는 특정 요소 아래의 모든 요소를 ​​선택하는 것입니다.

코드는 다음과 같습니다.

.demo * {border: 1px 단색 파란색;}

2. 요소 선택기(E)
요소 선택기는 CSS 선택기 중에서 가장 일반적이고 기본적인 선택기입니다. 요소 선택기는 실제로 html, body, p, div 등과 같은 문서의 요소입니다. 예를 들어 데모에서는 요소에 div, ul, li 등이 포함됩니다.

코드는 다음과 같습니다.

li {Background-color: grey;color: orange;}

3. )
클래스 선택기는 문서 요소와 독립적인 방식으로 스타일을 지정합니다. 클래스 선택기를 사용하기 전에 html 요소에 클래스 이름을 정의해야 합니다. 이름은 클래스를 선택할 수 있도록 html 태그에 존재합니다. 예:

2

", 클래스 선택기가 제대로 작동하도록 li에 클래스 이름을 추가하여 클래스 선택기 스타일을 요소와 더 쉽게 연결할 수 있도록 합니다.

.important {font-weight: Bold; color: yellow;}
위 코드는 중요한 클래스 이름이 있는 요소에 "font-weight: Bold, color: yellow" 스타일을 추가한다는 의미입니다. ;
클래스 선택자는 여러 클래스 이름을 가질 수도 있습니다. 또한 li 요소에 동시에 두 개 이상의 클래스 이름이 있으며 공백으로 구분할 수도 있습니다. 여러 클래스 이름을 사용하세요.

코드는 다음과 같습니다.

.important {font-weight:bold;}

.active {색상: 녹색;배경: 라임;}
.items {색상: #fff;배경: #000;}
.important.items {배경:#ccc;}
.first.last {color: blue;}

위 코드에서 볼 수 있듯이 ".important.items" 선택기는 "important" 및 "items" 클래스를 모두 포함하는 요소에 대해서만 작동합니다. 브라우저 클래스 선택기는 지원되지만 다중 클래스 선택기(.className1.className2)는 ie6에서 지원되지 않습니다.

5. 하위 선택자(Ｅ F)

하위 선택자는 포함 선택자라고도 합니다. 예를 들어 E F 이전에 E F가 선택됩니다. 상위 요소이고 F는 하위 요소입니다. 이는 E 요소의 모든 하위 F 요소가 선택된다는 의미입니다. 여기서 F는 E 요소의 자식 요소인지 손자 요소인지 또는 더 깊은 관계인지에 관계없이 선택됩니다. 즉, E에서 F의 관계 수준이 아무리 많아도 선택됩니다.

.demo li {color: blue;}

위는 div.demo의 모든 li 요소가 선택되었음을 의미합니다.

6. 하위 요소 선택기(E>F)

하위 요소 선택기는 특정 요소의 하위 요소만 선택할 수 있습니다. 여기서 E는 상위 요소이고 F는 하위 요소입니다. E>F는 E 요소 아래의 모든 하위 요소 F가 선택됨을 의미합니다. 이는 F가 E의 하위 요소인 EF(후손 선택기) 및 F가 E의 하위 요소일 뿐인 하위 요소 선택기 E > F와 다릅니다.

ul > li {배경: 녹색; 색상: 노란색;}
의 코드는 ul 아래의 모든 하위 요소 li가 선택되었음을 나타냅니다. 예:
IE6은 하위 요소 선택기를 지원하지 않습니다.

7. 인접 형제 요소 선택자(E + F)

인접 형제 선택자는 다른 요소 바로 뒤에 있는 요소를 선택할 수 있으며, 다른 요소에서는 동일한 상위 요소를 갖습니다. 즉, 두 EF 요소는 동일한 상위 요소를 가지며 F 요소는 E 요소 뒤에 인접해 있으므로 인접한 형제 요소 선택기를 사용하여 F 요소를 선택할 수 있습니다.

코드는 다음과 같습니다.

li + li {배경: 녹색;색상: 노란색; 테두리: 1px 단색 #ccc;}

위 코드는 li의 인접 요소 li가 선택되었음을 나타냅니다. 여기에는 총 10개의 li가 있으므로 위의 코드는 2번째 li부터 10번째 li까지 총 9개를 선택합니다.

IE6은 이 선택자는 지원되지 않습니다.

8. 범용 형제 선택자(Ｅ~Ｆ)

범용 형제 요소 선택자는 CSS3에 추가된 새로운 선택자입니다. , 인접한 형제 요소와 유사하며 동일한 상위 요소에 있어야 합니다. 즉, E와 F 요소는 동일한 상위 요소에 속하고 F 요소는 E 요소 뒤에 오고 E ~ F는 다음과 같습니다. 선택기는 E 요소 다음의 모든 F 요소를 선택합니다. 예를 들어 다음 코드는

코드는 다음과 같습니다.

.active ~ li { background: green;color: yellow; border: 1px solid #ccc;}

위 코드는 li.active 요소 뒤의 요소가 선택되었음을 나타냅니다. . 모든 형제 요소 li

9. 그룹 선택자(selector1, selector2,...,selectorN)

그룹 선택자는 동일한 스타일을 갖는 요소입니다. 위의 selector1, selector2,..., selectorN과 같이 함께 사용하고 쉼표 ","를 사용하여 각 선택기를 구분합니다. 이 쉼표는 규칙에 여러 개의 다른 선택기가 포함되어 있음을 알려줍니다. 쉼표를 생략하면 앞에서 언급한 하위 항목 선택기가 표시되므로 주의하세요.

CSS 선택자에 대한 자세한 소개 및 관련 글은 PHP 중국어 홈페이지를 참고해주세요!