HTML+CSS 학습노트(9) - CSS의 계승, 겹치기 및 특수성

태그:HTML+CSS
물려받다
CSS의 어떤 양식은 계승성을 지니고 있는데, 그렇다면 무엇이 계승입니까?계승은 하나의 규칙으로 양식이 특정한 html 라벨 요소뿐만 아니라 그 후손에게도 적용될 수 있도록 허용한다.예를 들어 아래 코드: 예를 들어 어떤 색이 p 라벨에 적용된다면 이 색 설정은 p 라벨뿐만 아니라 p 라벨의 모든 하위 요소 텍스트에도 적용된다. 여기서 하위 요소는span 라벨이다.

p{color:red;}

<p>    ，     <span>    </span>    。</p>

오른쪽 결과 창에서 p의 텍스트와span의 텍스트가 빨간색으로 설정된 것을 볼 수 있습니다.그러나 일부 css 스타일은 계승성을 가지지 않는다는 것을 주의하십시오.예: border:1px solid red;

p{border:1px solid red;}

<p>    ，     <span>    </span>    。</p>

상기 예에서 코드의 역할은 p탭에 1픽셀, 빨간색, 실심 테두리선을 설정했을 뿐, 하위 요소span에는 소용이 없었다.
특수성
때때로 우리는 같은 요소를 위해 서로 다른 CSS 스타일 코드를 설정하는데, 요소는 어떤 CSS 스타일을 사용합니까?다음 코드를 살펴보겠습니다.

p{color:red;}
.first{color:green;}
<p class="first">    ，     <span>    </span>    。</p>

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 .note p{color:yellow;} /*   100+10+1=111*/

주의: 또 하나의 권치가 비교적 특수하다. - 상속도 권치가 있지만 매우 낮다. 어떤 문헌에서는 0.1에 불과하다고 주장하기 때문에 상속의 권치가 가장 낮다고 이해할 수 있다.
겹치다
html 파일에서 같은 요소에 대해 여러 개의 css 양식이 존재할 수 있고 이 여러 개의 css 양식이 같은 권한을 가지면 어떻게 합니까?
겹치는 것은 html 파일에서 같은 요소에 여러 개의 css 양식이 존재할 수 있고 같은 권한이 있는 양식이 존재할 때 이러한 css 양식의 전후 순서에 따라 결정되며 맨 뒤에 있는 css 양식은 응용된다.
다음 코드와 같이 하십시오.

p{color:red;}
p{color:green;}
<p class="first">    ，     <span>    </span>    。</p>

마지막으로 p의 텍스트는 그린으로 설정됩니다. 이 겹치는 것은 이해하기 쉽고, 뒤의 스타일로 이해하면 앞의 스타일을 덮어씁니다.
따라서 앞의 css 스타일 우선순위는 이해하기 어렵지 않습니다.
인라인 스타일시트(태그 내부) > 포함된 스타일시트(현재 파일) > 외부 스타일시트(외부 파일)
중요성
우리가 웹 코드를 만들 때, 어떤 특수한 상황들은 어떤 스타일에 최고 권한을 부여해야 하는데, 어떻게 해야 합니까?이때 우리는 !important로 해결할 수 있다.
다음 코드:

p{color:red!important;}
p{color:green;}
<p class="first">    ，     <span>    </span>    。</p>

이 때 p 단락의 텍스트는 레드 레드로 표시됩니다.
주의:!important은 번호 앞에 써야 돼요.
웹 페이지 제작자가 css 스타일을 설정하지 않을 때, 브라우저는 자신의 스타일에 따라 웹 페이지를 표시할 수 있음을 주의하십시오.또한 사용자도 브라우저에서 자신의 습관적인 스타일을 설정할 수 있다. 예를 들어 어떤 사용자는 번호를 크게 설정해서 웹 페이지의 텍스트를 더욱 분명하게 볼 수 있다.이때 스타일 우선순위는 다음과 같습니다. 브라우저의 기본 스타일 <웹 제작자 스타일 <사용자가 직접 설정한 스타일입니다. 하지만 기억하세요!important 우선순위 스타일은 예외입니다. 사용자가 설정한 스타일보다 값이 높습니다.