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

내 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로 표시됩니다. 누군가 왜 이런 경우인지 설명 할 수 있습니까?

답변

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

인라인 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 선택기 특이성에 대한 좋은 기사 .

답변

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

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

답변

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

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

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

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

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

답변

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

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

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

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

답변

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

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

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

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

답변

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

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

답변

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 규칙을 재정의합니다.

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

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