CSS 스타일 상속 및 캐스케이딩에 대한 자세한 분석

이 글에서는 주로 CSS 스타일 상속과 관련 정보를 소개하고 있으며, 필요한 친구들은

1: 기본 선택기

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

기능:

1.

태그 선택기 는 현재 페이지에 지정된 모든 태그를 선택합니다. 태그 선택기는 코드의 현재 태그 계층 구조와 관련이 없으며 현재 페이지에 있는 한 선택할 수 있습니다.

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

클래스

선택: 태그에 클래스 이름을 지정하고

클래스 선택기를 통해 지정된 태그를 선택합니다.

2: 복합 선택자 3개 세트

1.

하위 선택자

A. 현재 선택 항목의 태그를 기준으로 후속 하위 태그를 찾을 수 있습니다

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

2. 선택기

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

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

3.

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

3:

css 상속 속성 정의: 현재 태그에 설정되면 하위 태그에도 설정되는 스타일이 있습니다. 참고: 스타일을 상속하는 태그와 스타일을 정의하는 태그는 반드시 종속 관계 (하위 태그 관계)

텍스트 스타일 설정

의 기본
속성을 ​​상속받을 수 있습니다. (색상 색상 스타일 텍스트 글꼴 글꼴 줄 속성 줄)
상자 모델에 대한 모든 것(p,span 등) .) 속성 설정(테두리, 위치, 레이아웃)은 상속할 수 없습니다

4: css cascading

정의: 다중 선택 선택기가 있는 경우 같은 태그에 동시에 적용하면 우선순위

유형

에 따라 스타일이 적용됩니다. 선택자의 판단 방법:

-가중치 판단 방식을 사용-선택별 ID 선택, 클래스 선택, 라벨 선택 횟수를 통해 가중치(ICE)를 계산

-ID 가중치를 먼저 비교한 후 카테고리를 비교하고 최종적으로 라벨 비교

- 비교 순서는 모두 동일합니다

참고: 가중치가 동일하면 나중에 가중치가 이전 가중치를 덮어씁니다. 숫자 가중치의 전제는 각 선택자가 지정된 요소를 선택해야 한다는 것입니다.

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

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

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