1. 특이성 규칙
선택자의 특이성은 선택자 자체의 구성 요소에 따라 결정되며, 초기 값은 0, 0, 0, 0입니다.
1. 선택기의 각 ID에 0, 1, 0, 0을 추가합니다.
2 선택기의 각 클래스, 의사 클래스 및 속성 선택에 0을 추가합니다. 0, 1, 0;
3. 선택기의 각 요소 또는 의사 요소에 대해 0, 0, 0, 1을 추가합니다.
4. .
참고:
1. 0, 0, 1, 0은 0, 0, 0, 13보다 더 구체적입니다.
2. 와일드카드 *의 특수성은 0, 0, 0, 0입니다. 이는 결합 문자(예: h1+p의 "+")에는 특수성이 전혀 없습니다. 스타일에는 특별한 것이 없습니다.
다음 코드를 참조하세요.
<head>
<style>
*{
color:red;
}
body{
color:cyan;
}
</style>
</head>
<body>
<p>Whatkindofcolorthisparawillbe?</p>
</body>페이지는 다음과 같이 표시됩니다.
4. 인라인 스타일이 가장 높습니다. 특이성은 1,0,0,0입니다.
5. !important로 표시된 문장을 중요한 문장이라고 합니다. 특별한 특징은 없지만 중요하지 않은 문장과 별도로 고려해야 합니다.
구체적으로: 중요하지 않은 진술은 그룹으로 그룹화되고, 둘 사이의 충돌은 구체성을 사용하여 해결되며, 중요한 진술은 그룹으로 그룹화되고, 둘 사이의 충돌은 항상 중요한 진술보다 내부적으로 해결됩니다. 중요하지 않은 진술 진술이 우선합니다.
2. 상속
1. 상속에는 특별한 특성이 없습니다. 이를 기억하면 많은 문제를 이해하는 데 도움이 될 수 있습니다.
다음 코드를 참조하세요.
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
</body>페이지 효과:
빨간색으로 설정되었지만 요소의 색상은 파란색입니까?
이것은 요소가 상위 요소의 색상을 상속하지 않기 때문이 아니라(이전에는 그렇게 생각했기 때문에 죄송합니다.) 요소가 ; 요소이지만 이 상속된 스타일은 전혀 특별하지 않습니다. 그러나 브라우저의 기본 스타일은 분명히 브라우저의 기본 스타일을 따릅니다. 기본 스타일. 2.
CSS 상속 관련: 일반적으로 하위 요소만 상위 요소의 스타일을 상속할 수 있습니다. 즉, 스타일은 DOM에서 위쪽으로만 전달될 수 있고 아래쪽으로만 전달될 수 있지만 예외가 있습니다. 배경 스타일은 본문에 적용됩니다. 요소는 위쪽으로 전달될 수 있으며, html 요소에 전달되면 그에 따라 캔버스를 정의할 수 있습니다. 3. 계단식 스태킹 규칙: 1. 독자를 위한 중요 설명 > 작성자를 위한 중요 설명 > 독자를 위한 일반 설명 > 2. 가중치가 동일할 경우 특이도에 따라 정렬되며, 특이도가 높은 쪽이 승리합니다. 3.특징이 동일할 경우 스타일 시트의 순서에 따라 정렬하면 나중에 나타나는 것이 승리합니다. 그런데, 바로 이 규칙 때문에 LoVe-HA의 순서가 링크 스타일을 선언하는 데 사용됩니다(LoVe-HA는 link; :visited; :hover;
:활동적인). 위 내용은 CSS 특이성, 상속성, 캐스케이딩 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
