클래스 선택자에는 어떤 유형이 있나요?
- 百草원래의
- 2023-10-07 14:00:032116검색
클래스 선택자 유형에는 기본 클래스 선택자, 다중 클래스 선택자, 계층적 클래스 선택자, 하위 요소 클래스 선택자, 인접 형제 클래스 선택자, 보편적 형제 클래스 선택자, 속성 값 클래스 선택자 및 음성 클래스 선택 장치 등이 포함됩니다. 자세한 소개: 1. 점으로 시작하는 선택기를 사용하는 기본 클래스 선택기는 지정된 클래스 이름을 가진 요소를 선택하는 것을 의미합니다. 2. 여러 클래스 이름을 결합하는 선택기를 사용하는 다중 클래스 선택기는 지정된 여러 이름을 가진 요소를 선택하는 것을 의미합니다. 클래스 이름의 경우 여러 클래스 이름 사이에 공백이 필요하지 않으며 연속해서 작성하면 됩니다. 3. 계층적 클래스 선택자, 공백으로 구분된 선택자 등.
이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.
클래스 선택자는 CSS에서 흔히 사용되는 선택자인데, 요소의 class 속성을 통해 조건에 맞는 요소를 선택합니다. CSS에는 다음과 같은 유형의 클래스 선택자가 있습니다.
1. 기본 클래스 선택자: 지정된 클래스 이름을 가진 요소를 선택하려면 마침표(.)로 시작하는 선택자를 사용합니다. 예를 들어 `.red`는 클래스 이름이 "red"인 모든 요소를 선택한다는 의미입니다.
2. 다중 클래스 선택기: 여러 클래스 이름의 조합을 사용하여 지정된 여러 클래스 이름을 가진 요소를 선택하는 선택기입니다. 여러 클래스 이름 사이에 공백이 필요하지 않으며, 연속해서 작성하면 됩니다. 예를 들어 `.red.bold`는 클래스 이름이 "red"와 "bold"인 요소를 선택하는 것을 의미합니다.
3. 하위 클래스 선택기: 요소의 하위 요소 중에서 지정된 클래스 이름을 가진 요소를 선택하려면 공백으로 구분된 선택기를 사용합니다. 예를 들어 `div .red`는 `
4. 하위 클래스 선택기: 요소의 직접 하위 요소 중에서 지정된 클래스 이름을 가진 요소를 선택하려면 보다 큼 기호(>)로 구분된 선택기를 사용합니다. 예를 들어 `div > .red`는 `
5. 인접 형제 클래스 선택기: 더하기 기호(+)로 구분된 선택기입니다. 이는 요소 바로 다음의 첫 번째 형제 요소에서 지정된 클래스 이름을 가진 요소가 선택되었음을 나타냅니다. 예를 들어 `h1 + .red`는 `
` 요소 바로 다음에 클래스 이름이 "red"인 첫 번째 요소를 선택한다는 의미입니다.
6. 일반 형제 클래스 선택기: 요소 뒤에 오는 모든 형제 요소 중에서 지정된 클래스 이름을 가진 요소를 선택하려면 물결표(~)로 구분된 선택기를 사용합니다. 예를 들어 `h1 ~ .red`는 `
` 요소 뒤에 클래스 이름이 "red"인 모든 요소를 선택한다는 의미입니다.
7. 속성 값 클래스 선택기: 대괄호([])와 등호(=)를 사용하여 지정된 속성 값이 있는 요소를 선택합니다. 예를 들어 `[class="red"]`는 `class` 속성 값이 "red"인 모든 요소를 선택한다는 의미입니다.
8. 부정 클래스 선택기: 지정된 클래스 이름이 없는 요소를 선택하려면 콜론(:not())을 사용하세요. 예를 들어 `:not(.red)`는 클래스 이름이 "red"가 아닌 요소를 선택한다는 의미입니다.
위는 CSS의 일반적인 클래스 선택기 유형입니다. 이러한 선택기를 사용하면 클래스 이름을 기반으로 웹 페이지의 요소를 선택하고 스타일을 지정하여 풍부하고 다양한 효과를 얻을 수 있습니다. 동시에 다른 선택자 및 속성 선택자와 함께 사용하여 선택 범위와 조건을 더욱 확장할 수 있습니다.
위 내용은 클래스 선택자에는 어떤 유형이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!