일반적인 CSS3 선택자는 무엇입니까?

CSS3은 웹 디자인에 사용되는 스타일 시트 언어로, HTML 요소를 보다 정확하게 지정하는 데 도움이 되는 풍부한 선택기가 있습니다. 다음은 일반적으로 사용되는 CSS3 선택자를 소개하고 해당 코드 예제를 제공합니다.

1. 요소 선택기
   요소 선택기는 HTML 문서에서 특정 요소를 선택하여 스타일을 지정할 수 있는 가장 기본적인 선택기입니다. 예를 들어 모든 단락 요소(

   )의 텍스트 색상을 빨간색으로 설정하려면 다음 코드를 사용할 수 있습니다.

p {
    color: red;
}

2. 클래스 선택기
   클래스 선택기를 사용하면 동일한 클래스 이름을 가진 요소를 선택할 수 있습니다. 요소. 요소에 클래스 속성을 추가하면 이를 해당 스타일 규칙과 연결할 수 있습니다. 예를 들어 클래스가 "class1"인 모든 요소의 배경색을 노란색으로 설정하려면 다음 코드를 사용할 수 있습니다.

.class1 {
    background-color: yellow;
}

3. ID 선택기(ID 선택기)
   ID 선택기는 클래스 선택기와 유사하며 사용됩니다. 지정된 요소. 차이점은 ID 선택기가 고유한 ID를 가진 요소를 선택한다는 것입니다. 요소에 id 속성을 추가하면 이를 해당 스타일 규칙과 연결할 수 있습니다. 예를 들어 "id1"이 있는 요소의 글꼴 크기를 20픽셀로 설정하려면 다음 코드를 사용할 수 있습니다.

#id1 {
    font-size: 20px;
}

4. 의사 클래스 선택기(Pseudo-class Selector)
   의사 클래스 선택기는 요소의 상태 또는 위치 스타일을 다르게 지정하려면 요소를 선택하세요. 일반적으로 사용되는 의사 클래스 선택기에는 hover, :visited, :first-child 등이 있습니다. 예를 들어 모든 링크 위로 마우스를 가져갈 때 링크 텍스트를 빨간색으로 바꾸려면 다음 코드를 사용할 수 있습니다.

a:hover {
    color: red;
}

5. 속성 선택기
   속성 선택기는 해당 속성을 기반으로 스타일을 지정할 요소를 선택합니다. 예를 들어, "title" 속성이 있는 모든 이미지의 테두리 색상을 녹색으로 설정하려면 다음 코드를 사용할 수 있습니다:

img[title] {
    border: 1px solid green;
}

6. Child Selector
   Child Selector는 요소의 직접 하위 요소를 선택하는 데 사용할 수 있습니다. 예를 들어 목록(
   )에서 모든 직계 하위 항목(
   • )을 선택하고 배경색을 파란색으로 설정하려면 다음 코드를 사용할 수 있습니다:

ul > li {
    background-color: blue;
}

7. Negation Selector)
   Negation Selector can can 스타일 지정을 위해 요소 집합에서 지정된 요소를 제거합니다. 예를 들어 "class1" 클래스가 있는 모든 요소를 ​​제외한 요소를 선택하고 텍스트 색상을 회색으로 설정하려면 다음 코드를 사용할 수 있습니다.

:not(.class1) {
    color: gray;
}

위에서는 HTML 선택 및 스타일 지정에 도움이 되는 일반적으로 사용되는 CSS3 선택기를 소개합니다. 요소를 더 정확하게 이러한 선택자를 유연하게 적용하면 웹 디자인에서 다양한 효과를 쉽게 얻을 수 있습니다.

위 내용은 일반적인 CSS3 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!