CSS 선택자에는 어떤 속성 선택자가 있습니까?

CSS 선택기의 속성 선택기에는 같음 선택기, 포함 선택기, 시작 선택기, 끝 선택기, 하위 문자열 선택기, 다중 값 선택기, 음수 선택기 등이 포함됩니다. 자세한 소개: 1. 대괄호와 등호를 사용하는 등호 선택자는 지정된 속성 값을 가진 요소를 선택하는 것을 의미합니다. 2. 대괄호와 별표를 사용하는 포함 선택자는 지정된 문자열의 속성 값을 포함하는 요소를 선택하는 것을 의미합니다. 선택기를 시작하고 대괄호와 별표를 사용하여 지정된 문자열로 시작하는 속성 값을 가진 요소를 선택합니다. 4. 선택기를 종료하고 대괄호와 달러 기호 등을 사용합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS 선택기는 속성 값을 기반으로 요소를 선택하기 위한 다양한 속성 선택기를 제공합니다. 이러한 속성 선택기는 속성 값의 동일성, 포함, 시작, 종료 등에 따라 선택할 수 있습니다. 다음은 CSS의 일반적인 속성 선택자입니다.

1. 같음 선택자: 대괄호([])와 등호(=)를 사용하여 지정된 속성 값이 있는 요소를 선택합니다. 예를 들어 `[class="red"]`는 클래스 속성 값이 "red"인 모든 요소를 ​​선택한다는 의미입니다.

2. 선택기 포함: 대괄호([])와 별표(*)를 사용하여 지정된 문자열의 속성 값을 포함하는 요소를 선택합니다. 예를 들어 `[href*="example"]`은 href 속성 값에 "example"이 포함된 모든 요소를 ​​선택한다는 의미입니다.

3. 선택기로 시작: 대괄호([])와 날카로운 기호(^)를 사용하여 지정된 문자열로 시작하는 속성 값을 가진 요소를 선택합니다. 예를 들어 `[class^="red"]`는 클래스 속성 값이 "red"로 시작하는 모든 요소를 ​​선택한다는 의미입니다.

4. 선택기로 끝남: 대괄호([])와 달러 기호($)를 사용하여 지정된 문자열로 끝나는 속성 값을 가진 요소를 선택합니다. 예를 들어 `[class$="red"]`는 클래스 속성 값이 "red"로 끝나는 모든 요소를 ​​선택한다는 의미입니다.

5. 하위 문자열 선택기: 대괄호([])와 세로 막대 기호(|)를 사용하여 지정된 속성 값이 있는 요소를 선택하거나, 속성 값이 지정된 문자열로 시작하고 뒤에 하이픈 요소가 옵니다. 예를 들어 `[lang|="en"]`은 lang 속성 값이 "en"인 모든 요소 또는 속성 값이 "en-"으로 시작하는 요소를 선택한다는 의미입니다.

6. 다중 값 선택기: 대괄호([])와 등호(=)를 사용하여 동시에 여러 속성 값을 지정합니다. 이는 지정된 속성 값 중 하나를 가진 요소를 선택한다는 의미입니다. 여러 속성 값은 공백으로 구분하세요. 예를 들어 `[class="red blue"]`는 클래스 속성 값이 "red" 또는 "blue"인 모든 요소를 ​​선택한다는 의미입니다.

7. 부정 선택기: 지정된 속성 값이 없는 요소를 선택하려면 대괄호([])와 콜론(:not())을 사용하세요. 예를 들어, `[class]:not([class="red"])`는 class 속성이 있지만 "red"가 아닌 모든 요소를 ​​선택한다는 의미입니다.

위는 CSS의 일반적인 속성 선택자입니다. 이러한 선택자를 사용하면 속성 값을 기반으로 웹 페이지의 요소를 선택하고 스타일을 지정하여 풍부하고 다양한 효과를 얻을 수 있습니다. 동시에 속성 선택자를 다른 선택자 및 의사 클래스 선택자와 함께 사용하여 선택 범위와 조건을 더욱 확장할 수도 있습니다.

위 내용은 CSS 선택자에는 어떤 속성 선택자가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!