CSS의 우선 순위는 무엇입니까?

109

내 CSS 클래스 중 하나가 다른 클래스를 재정의하는 이유를 알아 내려고 노력하고 있습니다 (다른 방법은 아님)

여기에 두 개의 CSS 클래스가 있습니다.

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

그리고 내 견해로는

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">

글꼴 (겹치는 요소)이 20 개가 아닌 10px로 표시됩니다. 누군가 왜 이런 경우인지 설명 할 수 있습니까?

html css

— 스티븐
소스

2

CSS 전처리기를 사용하고 있습니까? 나는 당신이이보고 @extend .smallbox;, 표준이 아닌 CSS와 같은 어떤 모습을.

— Jared Farrish 2014-08-03

당신은 정말로 결합하지 말아야합니다 @extend.-제가 생각하는대로 작동한다면-그리고 같은 요소에서 두 선택기를 사용하는 것입니다.

— millimoose

SMACSS 는 "하위 클래스"(예 :) 에만 변경된 속성을 포함 .smallbox-paysummary하고 선택적으로 CSS 파일의 출현 순서에 의존하지 않고 CSS 선언을보다 명확하게 만들 것을 권장 하는 것 같습니다..smallbox.smallbox-paysummary { font-size: 10px; }

— millimoose

1

그리고 .smallbox-paysummary더 작은 글꼴을 원하지 않는 경우 처음에 글꼴을 더 작게 만드는 이유는 무엇입니까?

— millimoose

이제 두 규칙이 동일한 특이성을 갖는 경우 CSS 규칙의 순서에 관계없이 나중에 요소의 클래스 속성 에 선언 된 규칙이 우선하지 않는 이유가 궁금 합니다.

— Andy

186

몇 가지 규칙이 있습니다 (이 순서대로 적용됨).

인라인 CSS (html 스타일 속성)는 스타일 태그 및 CSS 파일의 CSS 규칙을 재정의합니다.
보다 구체적인 선택자가 덜 구체적인 선택자보다 우선합니다.
코드 뒷부분에 나타나는 규칙은 둘 다 동일한 특이성을 가질 경우 이전 규칙을 재정의합니다.
!important항상 css 규칙 이 우선합니다.

귀하의 경우 적용되는 규칙 3입니다.

가장 높은 것부터 가장 낮은 것까지 단일 선택기에 대한 특이성 :

ids (예 : #mainselects <div id="main">)
클래스 (예 : .myclass), 속성 선택기 (예 : [href=^https:])와 가상 클래스 (예 : :hover)
요소 (예 : div) 및 의사 요소 (예 : ::before)

결합 된 두 선택 자의 특이성을 비교하려면 위의 각 특이성 그룹의 단일 선택 자의 발생 횟수를 비교합니다.

예 : 비교 #nav ul li a:hover대상#nav ul li.active a::after

ID 선택 자의 수를 세십시오. 각 ( #nav)에 대해 하나씩 있습니다.
클래스 선택 자의 수를 세십시오. 각 ( :hover및 .active)에 대해 하나씩 있습니다.
요소 선택 자의 수 ul li a를 세십시오. 첫 번째에 대해 3 ( ), 두 번째에 대해 4 ( ul li a ::after)가 있으므로 두 번째 결합 된 선택기가 더 구체적입니다.

CSS 선택기 특이성에 대한 좋은 기사 .

— 로렌츠 마이어
소스

특이성은 인라인 스타일 선언을 어떻게 재정의합니까?

— 자레드 Farrish

3

"... 스타일 태그의 css 규칙 ... css 파일의 규칙을 대체합니다". 나는 최근에이 신화를 몇 번 보았다. 어디에서 왔는지 모르겠지만 말도 안됩니다.

— Alohci

@jared 두 개의 첫 번째 포인트를 바꿨습니다. 이것이 당신이 의미하는 바입니까?

— Lorenz Meyer

네, 그게 제가 의미하는 바였습니다.

— Jared Farrish 2014-08-03

2

@PakiPat :hover은 클래스 선택자가 아니라 의사 클래스 선택자입니다.

— Lorenz Meyer

30

다음은 다이어그램에서 CSS 스타일링 순서를 편집 한 것입니다. CSS 규칙이 더 높은 우선 순위를 가지며 나머지보다 우선합니다.

면책 조항 : 저희 팀과 저는이 글을 블로그 게시물 ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) 과 함께 작업했습니다. 개발자.

— 진
소스

3

그 다이어그램에는 특별한 사고 방식이 필요합니다. 저에게는 스타일 상속 자체보다 다이어그램을 이해하는 것이 훨씬 더 어렵습니다.

— Lorenz Meyer

10

여기서 우리 가보고있는 것은 Mozilla가 말한대로 특이성 이라고 합니다 .

특이성은 브라우저가 어떤 CSS 속성 값이 요소와 가장 관련이 있는지 결정하여 적용되는 수단입니다. 특이성은 서로 다른 종류의 CSS 선택 자로 구성된 일치 규칙을 기반으로합니다.

특이성은 일치하는 선택기의 각 선택기 유형의 수에 의해 결정되는 주어진 CSS 선언에 적용되는 가중치입니다. 여러 선언의 특이성이 같으면 CSS에서 찾은 마지막 선언이 요소에 적용됩니다. 특이성은 동일한 요소가 여러 선언의 대상이되는 경우에만 적용됩니다. CSS 규칙에 따라 직접 타겟팅 된 요소는 항상 요소가 상위 요소에서 상속하는 규칙보다 우선합니다.

https://specifishity.com 의 0-0-0 설명이 마음에 듭니다 .

!important지시문 의 그림을 아주 잘 설명합니다 ! 그러나 때로는 인라인 style속성 을 재정의하는 유일한 방법 입니다. 따라서 두 가지를 모두 피하는 것이 가장 좋습니다.

— AMS777
소스

1

우수한. 내가 찾던 바로 그것. 이 그래픽은 훌륭합니다.

— saran3h

7

우선, @extend지시에 따르면 순수한 CSS가 아니라 SASS os Stylus와 같은 전처리기를 사용하고있는 것 같습니다.

이제 CSS에서 "우선 순위"에 대해 이야기 할 때 일반적인 규칙이 있습니다. 다른 규칙 (하향식 방식) 이후에 설정된 규칙이 적용됩니다. 귀하의 경우에는 지정 .smallbox후 .smallbox-paysummary규칙의 우선 순위를 변경할 수 있습니다.

그러나 조금 더 나아가고 싶다면 CSS cascade W3C 사양을 읽는 것이 좋습니다 . 규칙의 우선 순위는 다음을 기반으로합니다.

현재 미디어 유형.
중요성;
유래;
선택 자의 특이성 및 마지막으로 잘 알려진 규칙 :
후자가 지정됩니다.

— Renato
소스

5

AS는 W3의 상태입니다. W3 Cascade CSS

다른 스타일 시트가 적용되는 순서는 다음과 같습니다 (W3 캐스 케이 딩 섹션의 인용문).

사용자 에이전트 선언
사용자 일반 선언
저자 일반 선언
저자 중요 선언
사용자 중요 선언

이에 대한 자세한 내용은 참조 된 W3 문서에서

— 무료 개발자
소스

4

클래스가 html 요소에 나타나는 순서는 중요하지 않습니다. 중요한 것은 스타일 시트에 블록이 나타나는 순서입니다.

귀하의 경우 에는 10px 우선 순위 .smallbox-paysummary이후에 정의됩니다 .smallbox.

— LifeQuery
소스

4

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

인라인 CSS (html 스타일 속성)는 스타일 태그 및 CSS 파일의 CSS 규칙을 재정의합니다.

더 구체적인 선택자가 덜 구체적인 선택자보다 우선합니다.

코드 뒷부분에 나타나는 규칙은 둘 다 동일한 특이성을 가질 경우 이전 규칙보다 우선합니다.

— 럭키 차 투르 베디
소스

다음은 좋은 설명입니다. vanseodesign.com/css/css-specificity-inheritance-cascaade

— akostadinov

1

@Mahi 이번에 제안한 편집을 흔들었지만 앞으로는 편집에 쓰레기를 추가하지 마십시오. 첫 번째 손상을 "실행 취소"하는 두 번째 편집을 사용하는 것은 매우 나쁜 습관이며 리뷰어에게 매우 직관적이지 않으며 필요 이상으로 많은 작업을 생성합니다. 대신, 향상 될 수있는 다른 것 (예 : 맞춤법 또는 문법)을 찾으십시오.

— Siguza

0

또한 중요한 것은 HTML 요소에 동일한 우선 순위를 가진 두 가지 스타일이있는 경우 브라우저가 마지막으로 DOM에 작성된 스타일에 우선 순위를 부여한다는 것입니다. 따라서 DOM에있는 경우 :

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... div의 너비는 50px입니다.

— P. 에이버리
소스

이것은 실제로 우선 순위가 아닙니다. 이것은 Cascading Style Sheets의 Cascading 부분입니다.

— TylerH