[CSS 노트 4] CSS의 상속, 캐스케이딩 및 특수성

일부 CSS 스타일은 상속되는데, 상속이란 무엇인가요? 상속은 특정 HTML 태그 요소뿐만 아니라 해당 하위 요소에도 스타일을 적용할 수 있도록 허용하는 규칙입니다. 예를 들어, 다음 코드는 p 태그에 특정 색상이 적용되면 이 색상 설정은 p 태그뿐만 아니라 p 태그의 모든 하위 요소 텍스트에도 적용됩니다. 여기서 하위 요소는 범위입니다. 꼬리표.

p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p의 텍스트와 범위의 텍스트가 모두 빨간색으로 설정되어 있습니다. 그러나 일부 CSS 스타일은 상속되지 않습니다. 예를 들어 border:1px solid red;

p{border:1px solid red;} e388a4556c0f65e1904146cc1a846bee3학년 때 저는 여전히 쥐처럼 소심했습니다54bdf357c58b8a65c66d7c19c8e4d114 . 94b3e26ee717c64999d7867364b1b4a3

위 예시에서 코드의 기능은 p 태그에 테두리를 1픽셀, 빨간색, 실선 테두리선으로 설정하는 것뿐이고 서브에는 아무런 영향을 미치지 않습니다. -요소 범위.

2. 특이성
때때로 동일한 요소에 대해 다른 CSS 스타일 코드를 설정하는 경우 다음 코드를 살펴보겠습니다.

p{color:red;} .first{color:green;} de183b44a2e33772320f680eb6137d2d3학년 때 저는 여전히 쥐처럼54bdf357c58b8a65c66d7c19c8e4d114소심했습니다.

p와 .first 둘 다 p 태그와 일치하면 어떤 색상이 표시되나요? 녹색이 올바른 색상인데 왜 그럴까요? 이는 브라우저가 가중치에 따라 어떤 CSS 스타일을 사용할지 결정하고, 가중치가 더 높은 CSS 스타일을 사용하기 때문입니다.

가중치 규칙은 다음과 같습니다.

라벨 가중치는 1, 클래스 선택기 가중치는 10, ID 선택기의 최대 가중치는 100입니다.

예를 들어 다음 코드는 다음과 같습니다.

p{color:red;} /*权值为1*/ 
p span{color:green;} /*权值为1+1=2*/ 
.warning{color:white;} /*权值为10*/ 
p span.warning{color:purple;} /*权值为1+1+10=12*/ 
#footer .notep{color:yellow;} /*权值为100+10+1=111*/

참고: 상속에도 가중치가 있지만 일부 문헌에서는 0.1에 불과하다고 제안합니다. , 따라서 상속된 가중치가 가장 낮다고 이해할 수 있습니다.

3. 캐스케이딩
한 가지 질문에 대해 생각해 봅시다. html 파일의 동일한 요소에 대해 여러 CSS 스타일이 있을 수 있고 이러한 여러 CSS 스타일이 동일한 가중치 값을 갖는 경우는 어떻게 될까요? 이 섹션의 계단식 연결은 이 문제를 해결하는 데 도움이 됩니다.

캐스케이딩은 html 파일의 동일한 요소에 대해 여러 CSS 스타일이 있을 수 있음을 의미합니다. 동일한 가중치를 가진 스타일이 있는 경우 이러한 CSS 스타일의 순서에 따라 결정됩니다. 끝이 적용됩니다.

다음 코드에서 볼 수 있듯이:

p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

마지막으로 p의 텍스트는 녹색으로 설정됩니다. 이 계단식은 이후 스타일을 덮어쓰는 것으로 이해됩니다. 이전 스타일.

4. 중요성
웹페이지 코드를 작성할 때 특정 스타일에 대해 가장 높은 가중치를 설정해야 하는 특별한 상황이 있습니다. 이때 !important를 사용하여 문제를 해결할 수 있습니다.

다음 코드는

p{color:red!important;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

이때, p 문단의 텍스트가 빨간색으로 표시됩니다.

참고: !important는 세미콜론 앞에 써야 합니다.

여기서 웹 페이지 작성자가 CSS 스타일을 설정하지 않으면 브라우저는 CSS 스타일에 따라 웹 페이지를 표시합니다. 자신만의 스타일 세트로. 또한 사용자는 브라우저에서 자신만의 사용자 정의 스타일을 설정할 수도 있습니다. 예를 들어 일부 사용자는 웹 페이지의 텍스트를 더 명확하게 볼 수 있도록 글꼴 크기를 더 큰 크기로 설정하는 데 익숙합니다. 이때 스타일 우선순위에 주의하세요: 브라우저 기본 스타일 < 웹페이지 작성자 스타일 < 사용자가 설정한 스타일. 그러나 **!중요** 우선순위 스타일은 예외이며 보다 높은 가중치를 갖습니다. 사용자가 설정한 스타일.

위 내용은 CSS의 상속, 캐스케이딩, 특수성에 관한 [CSS Notes 4] 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!