CSS 우선순위 및 상속 문제

★CSS 충돌, 즉 우선순위
CSS 자체의 설정은 동일한 요소에 여러 스타일을 동시에 적용할 수 있으며, 스타일 간의 충돌은 동시에 발생할 수 있습니다. 이번에는 사용자가 원하는 효과를 얻을 수 없습니다.
★CSS 충돌 해결을 위한 우선순위 규칙:
● CSS 캐스케이딩 스타일 시트 도입 방법의 우선순위: 인라인 > 링크됨 > 가져오기
● 여러 외부 스타일에서 스타일의 우선순위는 다음과 같습니다. 나중에 나타나는 스타일이 먼저 나타나는 스타일보다 높은데, 이를 일반적으로 재정의라고 합니다.
● 스타일에서 선택자의 우선순위: ID 스타일>클래스 스타일>마크 스타일(가중치 비유: id의 가중치는 100, 클래스 가중치는 10, 태그 이름의 가중치는 1)
● 스타일 뒤에 !important를 추가합니다. 예: .abc {Background:#fff !improtant;} 이 스타일의 우선순위 level은 기본적으로 최상위 수준으로 올라가며, 전역 스타일은 이에 영향을 미칠 수 없습니다.
✪참고: !important는 세미콜론 앞에 써야 합니다
우선순위:
근접성 원칙(코드에 가까울수록 우선순위가 높음)
선택 범위가 작을수록 우선순위가 높아집니다. 우선 사항. CSS를 다듬고 상위 요소의 선택자를 더 추가하여 레이어별로 감싸고 선택 범위를 좁힙니다

★스타일 상속:
상속이란 상위(부모)의 CSS 스타일을 설정한다는 의미입니다. , 상위(상위) 레벨) 및 하위(하위) 레벨이 이 속성을 갖습니다. 일반적으로 텍스트 텍스트에만 텍스트 크기, 텍스트 굵기, 텍스트 색상, 글꼴 등과 같은 속성이 상속됩니다. 그러나 일부 CSS 스타일은 상속되지 않습니다. 예를 들어 border: 1px solid red;

demo:

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

로그인 후 복사

지침: (1) 상위(부모) 텍스트를 설정합니다. : p) 색상이 빨간색이고 하위(span)의 텍스트 색상이 설정되지 않았지만 텍스트에 상속 속성이 있으므로 하위 텍스트 내용은 여전히 빨간색입니다.
(2) 상위 텍스트 색상 스타일을 설정한 후 상속으로 인해 여러 하위 항목이 상위 항목과 동일해지는 경우 일부 하위 항목의 색상이 상위 항목과 동일해지기를 원하지 않는 경우에만 필요합니다. 해당 어린이에게 필요한 색상을 설정합니다.
✪참고: 또 다른 특별한 가중치가 있습니다. 상속에도 가중치가 있지만 매우 낮습니다. 일부 문헌에서는 이 가중치가 0.1에 불과하므로 상속의 가중치가 가장 낮다고 이해할 수 있습니다.

상속의 이점: 상위 CSS 스타일시트 속성만 설정할 수 있으며 하위 항목은 모두 이 CSS 속성을 가지므로 CSS 코드를 줄이고 작업을 용이하게 할 수 있습니다. 유지.

★CSS에서 상속할 수 있는 속성과 상속할 수 없는 속성
1. 상속이 없는 속성

1. 디스플레이: 요소가 생성해야 하는 상자 유형을 지정합니다.

2. 텍스트 속성:

vertical-align: 세로 텍스트 정렬

text-장식: 텍스트에 추가되는 장식을 지정

text-shadow: 텍스트 그림자 효과

white-space: 공백 문자 처리

unicode-bidi: 텍스트 방향 설정

3. Box 모델 속성: 너비, 높이, 여백, margin-top, margin - 오른쪽, 여백 하단, 여백 왼쪽, 테두리, 테두리 스타일, 테두리 상단 스타일, 테두리 오른쪽 스타일, 테두리 하단 스타일, 테두리 왼쪽 스타일, 테두리 너비, 테두리 상단 너비 , 테두리 오른쪽-오른쪽, 테두리 하단 너비, 테두리 왼쪽 너비, 테두리 색상, 테두리 상단 색상, 테두리 오른쪽 색상, 테두리 하단 색상, 테두리 왼쪽 색상, 테두리 상단 , border-right, border-bottom, border-left, padding, padding-top, padding-right, padding-bottom, padding-left

4. 배경 속성: background, background-color, background-image , background-repeat, background-position, background-attachment

5. 위치 지정 속성: float,clear, position, top, right, Bottom, left, min-width, min-height, max-width, max - 높이, 오버플로, 클립, Z-인덱스

6. 생성된 콘텐츠 속성: content, counter-reset, counter-increment

7. 개요 스타일 속성: 개요 스타일 , 외곽선-색상, 윤곽선

8. 페이지 스타일 속성: 크기, 페이지 나누기 전, 페이지 나누기 후

9. 사운드 스타일 속성: 일시 정지 전, 일시 정지 후 , 일시 정지, 큐 전, 큐 후, 큐, 재생 중

2. 상속 속성

1. 글꼴 계열 속성

글꼴: 결합 글꼴

font-family: 요소의 글꼴 모음 지정

font-weight: 글꼴 두께 설정

font-size: 글꼴 크기 설정