CSS 스타일 상속 및 계단식 분석

이 글은 주로 CSS 스타일 상속과 캐스케이딩 관련 정보를 소개합니다. 필요하신 분들은 참고하시면 됩니다.

1: 기본 선택기

태그 선택: 페이지에 있는 태그 이름에 따라 선택하고, 지정된 태그에 스타일을 직접 적용합니다.

특징:

1. 태그 선택기는 현재 페이지에 지정된 모든 태그를 선택합니다.

2. 현재 페이지에 있는 한 현재 태그 계층 구조와 연관이 없습니다.

id 선택: id 값을 먼저 설정하려면 태그를 지정해야 합니다(id 값은 반복될 수 없으며 전체 페이지에서 고유합니다).

클래스 선택: 라벨에 클래스 이름을 지정하고 클래스 선택기를 통해 지정된 라벨을 선택합니다.

2: 복합 선택자 3개 세트

1. 하위 선택자

A. 현재 선택의 태그를 기반으로 후속 하위 태그

B를 찾을 수 있습니다. 하위 선택기는 다단계 정밀 선택을 수행할 수 있습니다

2. 교차 선택기

형식: 첫 번째 레이어 선택 두 번째 레이어 선택 {}

참고: 점은 일반적으로 레이블로 시작하는 교차점을 나타냅니다

3. 결합 선택기

형식: 첫 번째 선택기, 두 번째 선택기,...{}

3: CSS 상속

정의: 몇 가지 스타일이 있습니다. . 현재 태그를 설정할 때 하위 태그도 설정됩니다.
참고: 스타일에서 상속된 태그와 스타일을 정의하는 태그는 하위 태그여야 합니다(하위 태그 관계)
예 텍스트의 기본 속성만 스타일 설정은 상속될 수 있습니다(색상 색상 스타일 텍스트 글꼴 글꼴 행 속성 행)
상자 모델(p, 스팬 등)에 대한 모든 속성 설정(테두리, 위치, 레이아웃)은 상속될 수 없습니다

4: CSS 캐스케이딩

정의: 여러 선택기가 동시에 동일한 태그에 대해 작동하는 경우 우선순위 수준에 따라 스타일이 지정됩니다. 기능

선택자의 판단 방법 :

-가중치 판단 방법
-각 선택에서 ID 선택, 클래스 선택, 태그 선택의 개수에 따라 가중치(ICE )
-id 가중치를 먼저 비교하고, class를 비교하고, 마지막으로 label을 비교
-비교 순서는 모두 동일합니다

참고: 가중치가 같으면 나중에 이전 항목을 덮어쓰게 됩니다. 숫자 가중치의 전제는 각 선택자가 지정된 요소를 선택해야 한다는 것입니다.

범위가 라벨 자체에 직접적인 영향을 미치지 않는 경우 근접성 원칙을 반영합니다.

중요한 것이 가장 높은 우선순위를 갖고 *가 가장 낮은 우선순위를 갖습니다

위 내용은 CSS 스타일 상속 및 계단식 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!