CSS 스타일시트는 어떤 순서로 재정의됩니까?
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선언을 사용하였습니다.동일한 "특정성 수준"의 규칙이 여러 개 존재할 경우 마지막으로 나타나는 규칙 중 하나가 승리합니다.
가장 구체적인 스타일이 적용됩니다.
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
모든 선택기가 동일한 특이점을 가질 경우 가장 최근의 declaration이 사용됩니다.
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 에서에서 을 볼 수 있습니다.
마지막으로 로드하는 CSS는 마스터로, 동일한 CSS 설정으로 모든 CSS를 재정의합니다.
예:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
재설정했습니다
h1 {
font-size: 20px;
}
도련님
h1 {
font-size: 30px;
}
h1 태그의 출력은 글꼴 크기: 30px;
예를 들어 계단식 규칙을 단순화해 보겠습니다.규칙은 일반적인 것에 좀 더 구체적으로 적용됩니다.
- 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에 대한 결과는 다음과 같습니다: (이미지를 게시할 권한이 부족합니다.다크 블루:Houston Chronicle News, Dark Green: 당신의 도시에서 가장 최근의 발전, Purple:휴스턴 지역 광고 섹션, 검정: 다음 섹션
부하 순서와 각 스타일에 적용되는 실제 규칙의 특수성 모두에 따라 달라집니다.질문의 상황에 따라 일반 리셋을 먼저 로드한 다음 페이지별로 로드합니다.그런 다음 다른 사람들이 이미 지적한 대로 의도된 효과가 나타나지 않으면 관련 선택자의 특수성을 조사해야 합니다.
가장 좋은 방법은 수업을 가능한 많이 사용하는 것입니다.ID 선택기(#)는 피합니다.단일 클래스만으로 셀렉터를 작성할 경우 CSS 상속이 훨씬 더 쉽게 따라할 수 있습니다.
업데이트: 이 기사에서 CSS 특수성에 대해 자세히 알아보기: https://css-tricks.com/specifics-on-css-specificity/
질문하신 내용을 보면 중복된 선택사항, 모든 페이지에 대해 적용되는 마스터 집합, 그리고 각 개별 페이지의 마스터 값을 무시하고자 하는 보다 구체적인 집합이 있을 것으로 생각됩니다.그렇다면 당신의 주문이 맞습니다.마스터가 먼저 로드되고 후속 파일의 규칙이 우선합니다(동일하거나 동일한 무게일 경우).이 웹 사이트 http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ 에서 모든 규칙에 대해 강력하게 권장하는 설명이 있습니다. 처음에 프론트엔드 개발을 시작했을 때 이 페이지에서는 매우 많은 질문을 정리했습니다.
선언의 우선순위를 규정하는 것은 캐스케이드입니다.공식 사양서를 추천해 드릴 수 있습니다. 이 부분은 잘 읽힙니다.
https://www.w3.org/TR/css-cascade-3/ # cascading
다음은 우선 순위의 내림차순 정렬에 영향을 미칩니다.
원산지와 중요도의 조합:
Transition- 과 같이
!important - 과 같이
!important - 페이지 작성자의 선언에 다음과 같이 표시됨
!important- 요소에 대한 정의:
style기여하다 - 문서 전반에 걸친 정의
- 요소에 대한 정의:
Animation포고문들- 페이지 작성자 선언
- 요소에 대한 정의:
style기여하다 - 문서 전반에 걸친 정의
- 요소에 대한 정의:
- 사용자 선언
- 사용자 에이전트의 선언
두 선언의 기원과 중요성이 같다면, 요소가 얼마나 명확하게 정의되었는지를 의미하는 특정성이 작용하여 점수를 계산합니다.
- 모든 식별자에 대해 100점(
#x34y) - 매 수업마다 10점 만점 (
.level) - 모든 요소 유형에 대해 1점(
li) - 유사 element마다 1점씩(
:hover) 제외:not
예를 들어, 셀렉터는
main li + .red.red:not(:active) p > *24의 특이성을 갖습니다.- 모든 식별자에 대해 100점(
두 정의의 기원, 중요도 및 특정성이 동일한 경우에만 출현 순서가 역할을 합니다.이후의 정의는 문서의 이전 정의(가져오기 포함)보다 먼저 적용됩니다.
편집: 2020년 4월, @LeeC의 의견에 따르면, 더 이상 그렇지 않습니다.
예, 한 장에 담긴 것과 동일하게 작동합니다.
주문 로드가 중요합니다.
<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덮어쓰게 됩니다.
배포하기 전에 모든 규칙을 한 장에 넣고 최소화하는 것이 가장 좋습니다.
코드를 실행할 때 위에서 아래로 읽히는데, 이는 마지막 CSS 링크가 그 위의 모든 스타일 시트에서 유사한 스타일을 무시한다는 것을 의미합니다.
예를 들어, 두 개의 스타일 시트를 생성한 경우
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
그리고 이 두 가지 모두에서, 여러분은 두 가지 다른 색상으로 배경색을 설정합니다 - 스타일 2에서 몸의 색을 우선순위로 정합니다. css.
를 사용하면 스타일링 우선 순위 문제를 피할 수 있습니다.!IMPORTANT수업 스타일 안에서 당신은 우선순위를 정하거나, 가능하면 당신의 arranging을 다시 하기를 원합니다.<link>주문.
언급URL : https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override
'programing' 카테고리의 다른 글
| WordPress 홈 페이지에 주석 표시 (0) | 2023.10.11 |
|---|---|
| org.springframework.web.reactive.기능.지원되지 않는 MediaType 예외:내용 유형 'text/xml';charset=UTF-8' 바디 지원 안 됨유형 (0) | 2023.10.11 |
| 동일한 mariaDB는 PHP 7.4에 FAT FREE가 적용된 PHP 7.1보다 훨씬 느리게 삽입됨 (0) | 2023.10.11 |
| 변수가 여러 문자열 값과 같지 않은지 확인하는 더 간단한 방법은? (0) | 2023.10.11 |
| AV 오디오 녹음기에서 오류가 발생함 (0) | 2023.10.11 |