CSS 작성 시 속성 우선순위 문제에 대한 솔루션

이 글은 주로 CSS 작성 시 속성 우선순위 문제를 소개하며, 요소 간의 계층적 계산과 상속 관계에 초점을 맞췄습니다. 필요한 친구가 참고할 수 있습니다.

스타일을 추가할 때 그걸 발견했을 때. 요소에서는 작동하지 않습니다. 우선 순위 문제가 있습니다. 그렇다면 CSS 우선순위 문제를 어떻게 처리해야 할까요? 아래에는 CSS 우선순위 문제를 해결하기 위한 몇 가지 일반적인 규칙이 요약되어 있습니다.

스타일 거리
외부 스타일, 내부 스타일, 인라인 스타일 등을 사용하여 요소에 지정된 스타일을 추가할 수 있습니다. 이때 우선순위는

외부 스타일 이는 이해하기 더 쉬울 것입니다. 즉, 스타일이 요소에 가까울수록 우선순위가 높아집니다. 예:

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

이때 표시되는 우선순위는 빨간색 > 파란색 > 녹색입니다. 그래서 내 색깔은 빨간색으로 나타납니다.

특별한 계산 방법
다음 코드가 있다고 가정합니다:

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>   
<p id="idSelector">   
  <p class="classSelector">my color</p>   
</p>

다음과 같은 CSS에 직면합니다. 우선순위를 결정하는가?

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>

특별한 계산 방법은 다음과 같습니다:

요소, 의사 요소: 1 – (0,0,0,1)
클래스, 의사 클래스, 속성: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
인라인 스타일: 1 – ( 1, 0,0,0)
여기서 속성은 다음을 참조합니다.

효과는 다음과 같습니다.

우선 순위는 위에서부터입니다. to top 계산 방법에 대해서는 동일한 예가 제공됩니다.

p: 1 요소 – ​​(0,0,0,1)
p: 1 요소 – ​​(0,0 ,0,1 )
#idSelector: 1 ID – (0,1,0,0)
p#idSelector: 1 요소, 1 ID – (0,1,0,1)
p# idSelector p: 요소 2개, ID 1개 – (0,1,0,2)
p#idSelector p.classSelector: 요소 2개, 클래스 1개, ID 1개 – (0,1,1,2)
그래서 이제 위의 예를 다시 살펴보겠습니다.

p p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   
#idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

우선순위가 (0,1,0,1) > 따라서 마지막으로 표시된 색상이 빨간색이라는 것을 알 수 있습니다.

상속
상속은 비교적 이해하기 쉬운 개념입니다. 즉, 하위 요소는 상위 요소의 스타일을 상속합니다. 예:

<p style="color:red">   
  <p>my color</p>   
</p>

위 예의 범위는 상위 요소 p의 스타일을 상속합니다. 그러나 margin 및 padding 속성과 같은 모든 속성이 기본적으로 상속을 사용하는 것은 아닙니다. 예:

<p style="margin:10px;padding:10px">   
  <p>my color</p>   
</p>

이때 요소 p는 다음을 수행하지 않는 한 상위 요소 p의 여백 및 패딩 스타일을 상속하지 않습니다.

<p style="margin:10px;padding:10px">   
  <p style="margin:inherit;padding:inherit">my color</p>   
</p>

요약
1. 먼저 요소에 작용하는 모든 스타일을 찾습니다. (상속된 스타일을 무시하지 마세요)
2. 스타일의 효과 거리를 계산합니다. 거리가 가까울수록 우선순위가 높아집니다.
3. 특별한 계산 방법을 사용하여 같은 거리 내에서 스타일을 결정합니다.
4. 계산된 결과가 동일한 경우 나중에 선언된 스타일이 이전에 선언된 스타일을 재정의합니다.
5. 스타일에 !important를 설정하면 우선순위에 관계없이 해당 스타일이 우선 적용됩니다. (절대적으로 필요한 경우가 아니면 이 방법을 사용하지 않는 것이 좋습니다. 의심할 여지없이 CSS 아이디어를 따르지 않는 사용법이기 때문입니다.)

위 내용은 CSS 작성 시 속성 우선순위 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!