CSS의 선택자는 무엇입니까? 선택자의 우선순위를 알고 있나요?

프론트엔드 엔지니어로서 CSS 선택기에 대해 낯설지 않습니다. 선택기는 레이아웃의 필수적인 부분입니다. 그럼 CSS에 선택기가 무엇인지 아시나요? CSS 선택기의 우선순위는 무엇입니까? 비밀을 알아야만 직장에서 더 편안해질 수 있습니다. 다음으로 CSS 선택자와 우선순위에 대해 이야기해 보겠습니다.

1. CSS 선택자란? CSS에는 ID 선택자, 클래스 선택자, 와일드카드 선택자, 의사 클래스 선택자 등 다양한 선택자가 있습니다. 다음으로 일반적으로 사용되는 선택자를 소개하겠습니다.

1. 태그 선택기

구문: 태그 이름 {}, 예: h1{} //모든 h1 요소에 대한 스타일을 설정합니다.

2. ID 선택기

구문: #id name{} //id 값은 고유해야 하며 반복할 수 없습니다. 예: #top{} //id가 top인 요소의 스타일을 설정합니다.

3. 클래스 선택기

구문: .class{}, 예: .box{} //클래스 값이 box인 모든 요소에 대해 스타일을 설정합니다.

4. 그룹 선택기

구문: 선택기 1, 선택기 2, 선택기 N{}, 예: #box1,.box2,p{} //id가 box1, 클래스 box2 및 p 스타일인 요소의 경우.

5. 와일드카드 선택기

구문: *{}, 예: *{font-size: 16px} //전체 페이지의 글꼴 크기를 16px로 설정합니다.

6. 하위 선택자

구문: 선택자 1 선택자 2{}, 예: p .aa{} //지정된 상위 요소 p의 지정된 하위 .aa를 선택합니다.

7. 하위 요소 선택기

구문: 상위 요소>하위 요소{}, 예: p>.box{} //상위 요소 p의 지정된 하위 요소 .box를 선택합니다. 하위 요소 선택기와의 차이점에 유의하세요

8. 의사 클래스 선택기

가상 클래스는 다음과 같은 일부 특수 상태를 나타내는 데 사용할 수 있습니다.

: 링크 - 방문하지 않은 하이퍼링크.

: 방문함 - 방문한 적이 있는 하이퍼링크입니다.

: hover - 마우스가 지나가는 요소입니다.
: active - 클릭 중인 요소입니다.

eg: a:hover{color:red} //마우스가 a 라벨을 통과하면 색상이 빨간색으로 변경됩니다.

2. CSS 선택자의 우선순위

동일한 요소에 서로 다른 값을 적용할 때 정의된 속성 간에 충돌이 있는 경우 이때 어떤 값을 사용해야 하는지가 관련됩니다. 이제 CSS를 우선시해야 할 때입니다. 1. 속성 뒤에 !important를 사용하면 페이지의 어느 위치에나 정의된 요소 스타일이 재정의됩니다.

2. 스타일 속성으로 요소 내에 작성된 내부 스타일

4. 클래스 선택기
6. 와일드카드 선택기
7. 요약 정렬: !important ; 내부 스타일 > ID 선택기 > 태그 선택기 > 와일드카드 선택기 > 브라우저 기본 속성


요약: 위에는 일반적으로 사용되는 CSS 선택기 및 해당 구문 규칙이 요약되어 있습니다. 선택기의 우선순위에 관해서는 여기서는 최종 결론만 제시합니다. 여기서는 데모가 필요하지 않습니다. 이 튜토리얼이 도움이 되기를 바랍니다!

위 내용은 CSS의 선택자는 무엇입니까? 선택자의 우선순위를 알고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!