CSS 우선순위에 대한 자세한 분석 공유
- 高洛峰원래의
- 2017-03-10 11:24:511612검색
CSS 우선순위에 대해 이야기하기 전에 CSS가 무엇인지, CSS가 어떤 용도로 사용되는지 이해해야 합니다.
먼저 CSS에 대해 간단히 설명하자면, CSS는 Cascading Style Sheets의 약자입니다.
그 사양은 인터넷 역사상 독특한 발전 단계를 나타냅니다. 요즘 웹페이지 제작에 종사하는 친구들이라면 CSS에 대해 들어보지 못한 사람은 거의 없을 것입니다. 왜냐하면 CSS 우선순위에 대해 이야기하기 전에 CSS가 무엇인지, 어떤 용도로 사용되는지 이해해야 하기 때문입니다.
먼저 CSS에 대해 간단히 설명하자면, CSS는 Cascading Style Sheets의 약자입니다. 그 사양은 인터넷 역사에서 독특한 개발 단계를 나타냅니다. 요즘 웹페이지 제작에 종사하는 친구들은 CSS에 대해 들어본 적이 거의 없을 것입니다. 웹페이지를 만드는 과정에서 CSS를 사용해야 하는 경우가 많기 때문입니다.
둘째: CSS를 통해 문서에 풍부하고 수정하기 쉬운 모양을 설정할 수 있어 웹페이지 제작자의 작업 부담을 줄여 제작 비용과 사후 유지 관리 비용을 줄일 수 있습니다.
사실 CSS가 무엇인지, 어떤 역할을 하는지 이야기하는 것은 완전히 중복되는 일입니다. 웹 페이지 제작에 종사하는 친구들은 이미 어느 정도 접해 봤을 거라 생각합니다.
본론으로 돌아가 오늘의 주제로 들어가겠습니다.
1. CSS 우선순위란 무엇인가요?
소위 CSS 우선순위는 CSS 스타일이 브라우저에서 구문 분석되는 순서를 나타냅니다.
2. CSS 우선순위 규칙
스타일이 우선순위이기 때문에 이 우선순위를 합의하는 규칙이 있는데, 이 "규칙"이 핵심입니다. 말할 필요가 있습니다.
스타일 시트의 특징은 다양한 규칙의 상대적 가중치를 설명합니다. 기본 규칙은 다음과 같습니다.
선택기의 ID 속성 수를 계산합니다.
선택기의 CLASS 속성 수를 계산합니다.
선택기의 HTML 태그 이름 수를 계산합니다.
마지막으로 공백이나 쉼표를 추가하지 않고 세 개의 숫자를 올바른 순서로 쓰면 세 자리 숫자를 얻습니다(css2.1은 4자리로 표시됩니다). (숫자를 세 자리로 끝나는 더 큰 숫자로 변환해야 합니다.) 선택기에 해당하는 숫자의 최종 목록을 사용하면 높은 숫자의 어떤 기능이 낮은 숫자의 기능보다 우선하는지 쉽게 확인할 수 있습니다.
예:
각 ID 선택기(#someid)에 0,1,0,0을 추가합니다.
각 클래스 선택자(.someclass), 각 속성 선택자([attr=value] 등으로 구성) 및 각 의사 클래스(hover 등으로 구성)에 추가합니다. .) 0,0,1,0.
각 요소 또는 의사 요소(:firstchild) 등에 0,0,0,1을 추가합니다.
다른 선택기에는 전역 선택기 *와 0,0,0,0이 포함됩니다. 추가하지 않는 것과 동일하지만 이는 일종의 특이성이기도 하며 이에 대해서는 나중에 설명하겠습니다.
3. 특성별로 분류된 선택자 목록
다음은 특성별로 분류된 선택자 목록입니다.
|
선택기
|
특성 값 td> |
||||||||||||||
h1 {color:blue;} |
1 |
||||||||||||||
| p em {color:purple;} | 2 | ||||||||||||||
.apple {color:red;} |
10 | ||||||||||||||
p.bright {color:yellow;} |
11 | p.bright em. 어두운 {색상:갈색;} |
22 | ||||||||||||
#id316 {color:yellow} |
100 |
위 표만 보면 이해하기 어려울 것 같습니다. 또 다른 표는 다음과 같습니다.
|
선택기
|
기능 값 |
| h1 {색상:파란색;} | 1 | P em {색상:보라색;} | 1+1=2 |
| .apple {색상:빨간색;} | 10 |
| p.bright {color:yellow;} | 1+10=11 |
| p.bright em.dark {색상:갈색;} | 1+10+1+10=22 |
| #id316 {색상 :노란색} | 100 |
위에서 보면 HTML 태그의 가중치가 1, CLASS의 가중치가 10, ID의 가중치가 100, 상속된 가중치가 0임을 쉽게 알 수 있습니다(추후에 설명하겠습니다).
이러한 규칙에 따라 숫자열을 조금씩 더해 최종 무게를 구한 후, 비교하고 선택할 때 왼쪽에서 오른쪽으로 조금씩 비교하세요.
우선순위 문제는 실제로 충돌 해결 문제입니다. CSS 선택기로 동일한 요소(콘텐츠)를 선택하면 우선순위에 따라 다른 CSS 규칙을 선택해야 합니다.
그러고보니 CSS의 상속에 대해서 이야기를 해야겠습니다.
4. CSS 상속
4.1 상속 성능
상속은 CSS A 전공 특징은 조상-후손 관계에 의존한다는 것입니다. 상속은 특정 요소뿐만 아니라 그 하위 요소에도 스타일을 적용할 수 있도록 하는 메커니즘입니다. 예를 들어 BODY로 정의된 색상 값은 단락 텍스트에도 적용됩니다.
스타일 정의:
body {color:#f00;}
예제 코드:
상속 테스트
효과 예:
이 코드는 응용 프로그램은 다음과 같습니다. "CSS 상속 테스트"는 빨간색으로 표시되고 태그로 인해 "상속"이라는 단어는 굵게 표시됩니다. 분명히 이 텍스트는 본문 {color:#f00;} 스타일에 정의된 색상을 상속합니다. 이것이 상속이 CSS의 일부인 이유입니다.
그러나 CSS 상속의 가중치는 0으로 매우 낮아 일반 요소의 가중치보다 낮습니다.
위의 예제 코드를 예로 사용합니다. 스타일 정의에 한 줄을 추가합니다.
strong {color:#000;}
예제 효과:
에 색상 값을 추가하기만 하면 에서 상속받은 스타일 색상을 재정의할 수 있음을 발견했습니다. 명시적으로 선언된 규칙은 상속된 스타일을 재정의할 수 있음을 알 수 있습니다.
4.2 상속의 한계
상속은 CSS에서 중요한 부분인데 왜 이렇게 될 수 있는지 생각할 필요도 없지만 CSS 상속도 마찬가지입니다. 제한이 있습니다.
테두리, 여백, 패딩, 배경 등과 같이 상속할 수 없는 속성이 있습니다.
스타일 정의:
p {border:1px solid #000;}
예제 코드:
< ;p>나는border물려받을 수 없습니다
기대 효과:
실제 효과 :
위의 효과에서 테두리를 상속할 수 없으며 여기에 포함되지 않은 다른 속성도 마찬가지임을 알 수 있습니다. 하나.
5. 추가 참고사항
텍스트 내 스타일 우선순위는 1,0,0,0이므로 항상 외부 정의보다 높습니다. 여기서 텍스트 내 스타일은
blah
형식의 스타일을 참조하는 반면, 외부 정의는 태그를 통해 정의된 규칙을 참조합니다.무엇보다 중요한 선언 규칙이 있습니다.
!important 선언이 충돌하는 경우 우선순위가 비교됩니다.
우선순위가 동일한 경우 소스 코드에 나타나는 순서대로 결정되며 나중 우선순위가 우선 적용됩니다.
상속으로 얻은 스타일에는 특정성 계산이 없으며 다른 모든 규칙(예: 전역 선택기 *에 의해 정의된 규칙)보다 낮습니다.
@import를 통해 로드된 외부 스타일의 경우 @import는 다른 모든 규칙 정의보다 먼저 나타나야 하므로(그렇지 않은 경우 브라우저는 이를 무시해야 함) 후순위 우선 원칙에 따라 일반적으로 우선순위 충돌이 우선합니다. .
또한 IE는 @import를 잘못된 위치에서 인식할 수 있지만 @import가 어디에 있든 다른 모든 규칙 정의보다 먼저 간주하므로 오해가 발생할 수 있다는 점도 언급해야 합니다.
우선순위 문제는 단순해 보이지만 그 이면에는 여전히 매우 복잡한 메커니즘이 존재하므로 실제 적용에서는 더 많은 주의가 필요합니다.
6. 연습
위의 내용을 읽은 후 아주 간단한 질문을 해보세요. (직접 답변하기 전에 각 질문에 제공된 링크 주소를 읽지 마십시오.)
1. 동일한 스타일 이름을 가진 두 요소를 사용하여 다른 효과를 주는 방법:
코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
.test {
width:200px;
border:1px solid #000;
font:12px/200% "宋体";
color:#f00;
background:#ddd;
}
p.test {
color:#fff;
background:#070;
}
</style>
</head>
<body>
<div class="test">测试测试测试</div>
<p class="test">测试测试测试</p>
</body>
</html> 팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.
고정 효과:
固定代码：
2. 如何让
始终为黑色，而在不被包含的情况为红色：
提示：您可以先修改部分代码再运行
传说中的测试
传说中的测试
固定效果：
固定代码：
讨论CSS优先级
讨论CSS优先级
3. 如何写一个外部样式使得
覆盖我
的颜色为红色：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
h3 {
color:#f00!important;
}
</style>
</head>
<body>
<h3 style="color:#000;">覆盖我</h3>
</body>
</html>提示：您可以先修改部分代码再运行
4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
.b {
color:#000;
}
.a {
color:#f00;
}
</style>
</head>
<body>
<p class="a b">传说中滴测试</p>
</body>
</html>提示：您可以先修改部分代码再运行
固定代码：
传说中滴测试
关于样式优先级，今天就先聊到这。
讨论CSS优先级
讨论CSS优先级
覆盖我
的颜色为红色：
传说中滴测试
위 내용은 CSS 우선순위에 대한 자세한 분석 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!