HTML 헤더에는 다음이 있습니다.
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>styles.css내 페이지 별 시트입니다. master.css은 브라우저 기본값을 무시하기 위해 각 프로젝트에서 사용하는 시트입니다. 이 중 어떤 스타일 시트가 우선합니까? 예 : 첫 번째 시트에 특정 내용이 포함됨
body { margin:10px; }그리고 관련 테두리가 있지만 두 번째에는 내 재설정이 포함되어 있습니다.
html, body:not(input="button") {
margin: 0px;
padding: 0px;
border: 0px;
}본질적으로 CSS의 계단식 요소는 일반적인 CSS 함수에서와 마찬가지로 스타일 시트 참조의 관점에서 동일하게 작동합니까? 마지막 줄이 표시되는 것을 의미합니까?
답변
CSS 룰 캐스 케이 딩에 대한 규칙은 복잡합니다. 잘못 표현하지 말고 스펙을 참조하십시오.
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
한마디로 :보다 구체적인 규칙은 일반적인 규칙보다 우선합니다. 특정도는 !important선언의 사용 여부뿐만 아니라 관련된 ID, 클래스 및 요소 이름 수에 따라 정의 됩니다. 동일한 “특성 수준”의 규칙이 여러 개 존재하면 마지막 규칙 중 하나가 이깁니다.
답변
가장 구체적인 스타일이 적용됩니다.
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}모든 선택기의 특성이 동일한 경우 가장 최근의 편차가 사용됩니다.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}귀하의 경우 body:not([input="button"])더 구체적이므로 스타일이 사용됩니다.
답변
순서는 중요합니다. 다중 발생의 마지막 선언 된 값이 사용됩니다. 내가 운동 한 것과 동일한 것을 참조하십시오 : http://jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>의 순서를 바꾸면 .test{}HTML에서 CSS에 선언 된 마지막 HTML의 값을 얻는 것을 볼 수 있습니다
답변
마지막으로로드되는 CSS는 THE MASTER이며 동일한 CSS 설정으로 모든 CSS를 재정의합니다.
예:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>reset.css
h1 {
font-size: 20px;
}master.css
h1 {
font-size: 30px;
}h1 태그의 출력은 font-size : 30px;
답변
계단식 규칙을 예제로 단순화 해 보겠습니다. 규칙은 일반적으로 더 구체적으로 진행됩니다.
- ID의 첫 번째 규칙을 적용합니다 (주문에 관계없이 클래스 및 / 또는 요소에 적용)
- 순서에 관계없이 요소에 클래스를 적용
- 클래스 또는 ID가없는 경우 일반 클래스 또는 ID를 적용하십시오.
- 동일한 그룹 / 레벨에 대해 마지막 스타일을 순서 (파일로드 순서에 따른 선언 순서)로 적용합니다.
CSS와 HTML 코드는 다음과 같습니다.
<style>
h2{
color:darkblue;
}
#important{
color:darkgreen;
}
.headline {
color:red;
}
article {
color:black;
font-style:italic;
}
aside h2 {
font-style:italic;
color:darkorange;
}
article h2 {
font-style: normal;
color: purple;
}
</style>여기 CSS 스타일이 있습니다
<body>
<section>
<div>
<h2>Houston Chronicle News</h2>
<article>
<h2 class="headline" id="important">Latest Developments in your city</h2>
<aside>
<h2>Houston Local Advertisement Section</h2>
</aside>
</article>
</div>
<p>Next section</p>
</section>결과는 다음과 같습니다. 스타일 파일의 순서 나 스타일 선언에 관계없이 id="important"끝에 적용됩니다 ( class="deadline"선언 된 마지막에 유의 하지만 아무 효과도 없습니다).
<article>요소는 포함 <aside>하지만 마지막으로 선언 된 스타일이 경우에 적용됩니다 요소를 article h2 { .. } 제 H2 요소에.
다음은 IE11의 결과입니다. (이미지를 게시 할 권한이 없습니다.) DarkBlue : Houston Chronicle News, DarkGreen : 도시의 최신 개발, 자주색 : Houston 지역 광고 섹션, 검은 색 : 다음 섹션
답변
로드 순서와 각 스타일에 적용된 실제 규칙의 특이성에 따라 다릅니다. 질문의 맥락에서 일반 재설정을 먼저로드 한 다음 페이지별로로드하려고합니다. 그런 다음 여전히 의도 한 효과를 보지 못하면 다른 사람들이 이미 지적한대로 관련 선택기의 특이성을 조사해야합니다.
답변
편집 : @ LeeC의 의견에 따르면 2020 년 4 월, 이것은 더 이상 사건이 아닙니다
예, 마치 한 장에있는 것처럼 동일하게 작동합니다.
주문이 중요합니다!
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>위 코드에서 master.css이후에로드 될 것이라는 보장은 없습니다 styles.css. 따라서 master.css빠르게로드되어 styles.css시간이 걸리면styles.css 두 번째 스타일 시트가되며 동일한 고유성 규칙 master.css이 덮어 쓰여집니다.
배포하기 전에 모든 규칙을 하나의 시트에 넣고 축소하는 것이 가장 좋습니다.
