CSS의 스타일 재정의 원칙에 대한 자세한 소개를 공유하세요.-CSS 튜토리얼-php.cn

CSS의 스타일 재정의 원칙에 대한 자세한 소개를 공유하세요.

黄舟

풀어 주다： 2017-07-22 10:58:17

원래의

1478명이 탐색했습니다.

규칙 1: 상속으로 인해 스타일 충돌이 발생하면 가장 가까운 조상이 승리합니다(가장 가까운 원칙).
CSS의 상속 메커니즘을 사용하면 요소가 이를 포함하는 상위 요소에서 스타일을 상속할 수 있습니다. 다음 상황을 고려하세요.

<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}
p {color:blue;}
</style>
</head>
<body> 
<p>welcome to <strong>gaodayue的网络日志</strong>
</p>
</body>
</html>

로그인 후 복사

strong은 각각 body와 p에서 색상 속성을 상속하지만 p는 상속 트리에 있기 때문입니다. Strong에 더 가깝기 때문에 Strong의 텍스트는 결국 p의 파란색을 상속하게 됩니다.

규칙 2: 상속된 스타일이 직접 지정된 스타일과 충돌하는 경우 직접 지정된 스타일이 우선합니다(가장 직접적인 원칙).
위의 예에서

strong {color:red;}

로그인 후 복사

와 같이 Strong 요소의 스타일도 지정되면 규칙 2에 따라 Strong의 텍스트가 결국 빨간색으로 표시됩니다.

규칙 3: 직접 지정된 스타일이 충돌하는 경우 스타일 가중치가 더 높은 스타일이 승리합니다.
스타일의 가중치는 스타일 선택기에 따라 다릅니다. 가중치는 다음 표에 정의되어 있습니다.

css 선택자 가중치
태그 선택자 1
클래스 선택자 10
ID 선택자 100
인라인 스타일 1000
의사 요소(:first-child 등) 1
의사 클래스(:link 등) 10

예 인라인 스타일의 가중치>>ID 선택기>>클래스 선택기>>태그 선택기, 또한 하위 선택기의 가중치는 각 항목의 가중치의 합입니다. 예를 들어 "#의 가중치" nav .current a"는 100 + 10 + 1 = 111입니다.

규칙 4: 스타일 가중치가 동일하면 후자가 승리합니다.
다음 상황을 고려해보세요

<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p> 
.byline a {color:red;}p .email {color:blue;}

로그인 후 복사

".byline a"와 "p .email"은 모두 위의 a 요소를 직접 지정하고 가중치는 11입니다. 규칙 4에 따르면 최종 표시는 파란색입니다.

스타일 시트는 외부 또는 내부일 수 있으므로 규칙 4는 외부 스타일 시트가 소개되는 순서(및 요소의 순서)와 외부 스타일 시트 및 요소의 배치에 주의를 기울여야 함을 상기시켜 줍니다. 내부 스타일 시트. 일반적으로 내부 스타일 시트는 모든 외부 스타일 시트가 도입된 후, 일반적으로 앞에 나타납니다.

규칙 5: !중요한 스타일 속성은 재정의되지 않습니다.
!important는 꼭 필요한 경우 위의 네 가지 규칙을 어기는 "황금손가락"으로 볼 수 있습니다. 특정 스타일 속성을 사용해야 하고 재정의되지 않도록 하려면 규칙 4의 예를 들어 속성 값 뒤에 !important를 추가하면 됩니다. ".byline a {color:red !important;}"는 강제로 수행할 수 있습니다. 링크가 빨간색으로 표시됩니다. 대부분의 경우 스타일 재정의는 다른 방법으로 제어할 수 있으며 !important를 남용할 수 없습니다.

위 내용은 CSS의 스타일 재정의 원칙에 대한 자세한 소개를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!