CSS 스타일 시트는 어떤 순서로 재정의됩니까?

157

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 overriding stylesheet

— ian5v
소스

방금 이것이 웹 마스터에게 더 적합하다는 것을 깨달았습니다. 이것을 게시하기에 더 좋은 곳이 있습니까?

— ian5v

10

바로 여기가 좋습니다.

— 블렌더

4

body:not(input="button")그건 그렇고 유효한 선택자가 아닙니다. 아마로 나누려고했을 것입니다 body, input:not([type="button"]).

— BoltClock

그 흥미 롭군요. 나는 그런 구문을 본 적이 없다고 생각합니다. 나는 아직도 새로운 사람이지만 그 이중 괄호는 나에게 외국 적입니다.

— ian5v

이 괄호는 속성 선택자를위한 것입니다 : developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic : 아마 당신은 스타일 시트의 순서를 바꾸고 싶을 것입니다 : 당신의 장군 master.css은 먼저로드해야합니다. 의 마스터 스타일 styles.css.

— grilly February

163

CSS 룰 캐스 케이 딩에 대한 규칙은 복잡합니다. 잘못 표현하지 말고 스펙을 참조하십시오.

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

한마디로 :보다 구체적인 규칙은 일반적인 규칙보다 우선합니다. 특정도는 !important선언의 사용 여부뿐만 아니라 관련된 ID, 클래스 및 요소 이름 수에 따라 정의 됩니다. 동일한 "특성 수준"의 규칙이 여러 개 존재하면 마지막 규칙 중 하나가 이깁니다.

— duskwuff-비활성-
소스

1

그렇다면 스타일 시트가 어떤 순서로로드되는지에 대한 특정 규칙이 없습니까? CSS가 특수성 측면에서 어떻게 표시되는지 이해하지만 재정의하지 않으면 마스터 시트가로드된다고 가정합니다.

— ian5v

11

실제로 !important캐스케이드에 직접 참여하며 특이성과는 아무런 관련이 없습니다. 특이성은 선택자와 관련이 있지만 !important속성 선언과 함께 사용됩니다. (따라서 규칙이 복잡하다고 말할 수 있습니다!;)

— BoltClock

2

따라서 스타일 시트는 요소와 동일한 방식으로로드됩니까? 특정 성이 동일한 경우 마지막 우선 순위가 우선합니까?

— ian5v

3

@iananananan : 기본적으로 브라우저는 개별 스타일 시트 측면에서 CSS를 보지 않습니다. 스타일 시트가 여러 개인 경우 모두 하나의 거대한 스타일 시트 인 것처럼 처리되고 규칙이 적절히 평가됩니다.

— BoltClock

2

@ user34660 BoltClock의 의견은 CSS 스타일의 관점에서입니다. 스타일 시트가 DOM에서 분리되어 유지되는 것이 맞지만 분리는 해당 스타일이 어떤 것에 적용되는 방식에 영향을 미치지 않습니다.

— duskwuff -inactive- 2

31

가장 구체적인 스타일이 적용됩니다.

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"])더 구체적이므로 스타일이 사용됩니다.

— 블렌더
소스

1

마지막 선택기와 관련된 질문에 대한 내 의견을 참조하십시오.

— BoltClock

1

특수성 규칙은 편집 할 수없는 스타일 시트를 재정의해야 할 때 작업을 더 어렵게 만듭니다!

— Ari

23

순서는 중요합니다. 다중 발생의 마지막 선언 된 값이 사용됩니다. 내가 운동 한 것과 동일한 것을 참조하십시오 : http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

의 순서를 바꾸면 .test{}HTML에서 CSS에 선언 된 마지막 HTML의 값을 얻는 것을 볼 수 있습니다

— 로이 엠제이
소스

3

따라서 가장 구체적인 CSS를 마지막에 추가해야합니다.

— 라이브 사랑

17

마지막으로로드되는 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;

— 두들
소스

1

안녕하세요. 필자의 경우 첫 번째 정의 .css가 마지막에로드됩니다. 로드 순서 또는 정의 된 순서대로 적용됩니까?

— Eugen Konkov

고마워, 이것은 내가 찾던 정확한 설명입니다.

— HunterTheGatherer

7

계단식 규칙을 예제로 단순화 해 보겠습니다. 규칙은 일반적으로 더 구체적으로 진행됩니다.

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 지역 광고 섹션, 검은 색 : 다음 섹션

— 카간 아군
소스

6

로드 순서와 각 스타일에 적용된 실제 규칙의 특이성에 따라 다릅니다. 질문의 맥락에서 일반 재설정을 먼저로드 한 다음 페이지별로로드하려고합니다. 그런 다음 여전히 의도 한 효과를 보지 못하면 다른 사람들이 이미 지적한대로 관련 선택기의 특이성을 조사해야합니다.

— 프로 디지털 슨
소스

2

편집 : @ 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이 덮어 쓰여집니다.

배포하기 전에 모든 규칙을 하나의 시트에 넣고 축소하는 것이 가장 좋습니다.

— 새긴 금
소스

스마트 폰 및 태블릿에 고유 한 스타일 시트를로드 하기위한 조건부 미디어 속성을 포함하는 페이지의 <head> 섹션에서로드 된 거의 식별 가능한 스타일 시트 의 경우를 고려하십시오 . 이 경우 로드 순서가 결정되지 않은 경우 미디어에 지정된 논리 는 각 스타일 시트에 대해 독점적으로 배타적이어야합니다.

— Lindsay Haisley

@n_i_c_k 답변이 잘못되었습니다. 로드 순서가 아니라 선언 순서 가 중요 합니다. 난 그냥의 다운로드를 중지함으로써, 피들러와이 테스트 및시키는 완전 부하. 그런 다음 로드했습니다. "겹치는"스타일은 여전히 적용되었으며 로드 및 파싱 될 때까지 렌더링이 차단 되었습니다. 참고 : styles.css에 시도 했습니다 . master.cssstyles.cssmaster.cssmaster.cssmaster.cssrel=preloadmaster.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above

— LeeC

@LeeC에게 감사드립니다. 제 답변을 작성할 당시에는 정확한 내용임을 알고 있지만 지금 수정되었다는 귀하의 말씀을 듣고 답변을 수정하겠습니다.

— n_i_c_k

1

가장 좋은 방법은 클래스를 가능한 많이 사용하는 것입니다. 어쨌든 ID 선택기 (#)를 피하십시오. 단일 클래스로 선택자를 작성할 때 CSS 상속이 더 쉬워집니다.

업데이트 :이 기사에서 CSS 특이성에 대해 자세히 읽으십시오 : https://css-tricks.com/specifics-on-css-specificity/

— 제로 앙 옴스
소스

1

이것은 CSS 특이성에 대한 훌륭한 기사입니다. css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

귀하의 질문에 중복 선택, 모든 페이지에 적용되는 마스터 세트 및 각 개별 페이지의 마스터 값을 재정의하려는보다 구체적인 세트가 있다고 생각합니다. 이 경우 주문이 올바른 것입니다. 마스터가 먼저로드되고 후속 파일의 규칙이 우선합니다 (동일하거나 동일한 가중치 인 경우). 이 웹 사이트 ( http://vanseodesign.com/css/css-specificity-inheritance-cascaade/) 에 모든 규칙에 대해 적극 권장되는 설명이 있습니다. 프런트 엔드 개발을 시작했을 때이 페이지는 많은 질문을 해결했습니다.

— 사용자 3094826
소스

0

선언의 우선 순위를 정의하는 것은 계단식 입니다. 공식 사양을 추천 할 수 있습니다. 이 부분은 잘 읽을 수 있습니다.

https://www.w3.org/TR/css-cascade-3/#cascading

다음은 내림차순으로 정렬에 영향을줍니다.

원산지 와 중요성 의 조합 :
1. Transition 선언
2. 로 표시된 사용자 에이전트 선언 !important
3. 로 표시된 사용자 선언 !important
4. 로 표시된 페이지 작성자 선언 !important
  1. style속성이 있는 요소에 대한 정의
  2. 문서 전체 정의
5. Animation 선언
6. 페이지 작성자 선언
  1. style속성이 있는 요소에 대한 정의
  2. 문서 전체 정의
7. 사용자 선언
8. 사용자 에이전트의 선언
두 선언의 기원과 중요성이 동일 하면 요소가 얼마나 명확하게 정의되어 있는지를 나타내는 특이성 이 작용 하여 점수를 계산합니다.
- 모든 식별자에 대해 100 포인트 (#x34y )
- 모든 수업에 대해 10 포인트 ( .level)
- 모든 요소 유형에 대해 1 포인트 ( li)
- 모든 의사 요소 ( :hover)를 제외하고 1 포인트:not
예를 들어, 선택기 main li + .red.red:not(:active) p > *는 24의 지정 성을 갖습니다.
외형 의 순서는 두 정의가 동일한 기원, 중요성 및 특이성을 갖는 경우에만 역할을합니다. 나중에 정의가 문서의 이전 정의보다 우선합니다 (가져 오기 포함).

— 마이클 슈미트
소스

0

코드를 실행할 때 상단에서 하단으로 읽습니다. 즉, 마지막 CSS 링크는 위의 모든 스타일 시트에서 유사한 스타일을 무시합니다.

예를 들어 두 개의 스타일 시트를 만든 경우

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

이 두 가지 모두 본문 배경색을 두 가지 색상으로 설정합니다. style2.css의 본문 색상이 우선합니다.

우선 순위를 !IMPORTANT정하려는 클래스 스타일을 사용 하거나 <link>주문을 다시 정렬하여 스타일 우선 순위 문제를 피할 수 있습니다 .

— 엔남 호크
소스