CSS의 우선 순위는 무엇입니까?
저는 왜 제 css 수업 중 하나가 다른 수업을 무시하는 것처럼 보이는지 알고 싶습니다.
여기 2개의 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개가 아니라 10개로 표시되는데, 누가 왜 그런지 설명해주실 수 있나요?
다음과 같은 몇 가지 규칙이 있습니다(이 순서로 적용됨).
- 인라인 css(html 스타일 속성)는 스타일 태그 및 css 파일의 css 규칙을 재정의합니다.
- 보다 구체적인 선택기가 덜 구체적인 선택기보다 우선함
- 코드의 뒷부분에 나타나는 규칙은 둘 다 동일한 특수성을 가질 경우 이전 규칙을 재정의합니다.
- CSS가 있는
!important항상 우선합니다.
당신의 경우에는 규칙 3이 적용됩니다.
단일 선택기에 대한 가장 높은 값에서 가장 낮은 값까지의 특수성:
- ids(디버깅:
#main을 선택합니다.<div id="main">) - 클스예래)
.myclass속성 선택기(예:)[href=^https:]및 )는 다음과 같습니다.:hover) - 요소):
div및 )는 다음과 같습니다.::before)
결합된 두 선택기의 특이성을 비교하려면 위의 각 특이성 그룹의 단일 선택기 발생 횟수를 비교합니다.
예: 비#nav ul li a:hover#nav ul li.active a::after
- 셀렉터의 (ID 선의수세보십오시어를기택id) 각 1개씩 . 각각 하나씩 있습니다.
#nav) - 클래스 선택기의 수를 세어봅니다. 각 클래스 선택기의 수는 다음과 같습니다.
:hover그리고..active) - 선택기3개가 . 3개(
ul li a첫4, 는 4 ( ) 첫째번경두와경번우의째 4 ( )ul li a ::after), 따라서 두 번째 결합된 선택기가 더 구체적입니다.
다음은 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. 둘 노력하는 것이 둘 다따라서 둘 다 피하려고 노력하는 것이 최선의 방법입니다.
HTML 요소에 클래스가 나타나는 순서는 중요하지 않으며, 중요한 것은 스타일 시트에 블록이 나타나는 순서입니다.
당신의 경우에는.smallbox-paysummary는 다로정니다됩의 에 정의됩니다..smallbox따라서 10개월 우선 순위입니다.
우선, 당신의 것을 기준으로.@extend디렉티브, 당신은 순수한 CSS가 아니라 SAS os Stylus와 같은 전처리기를 사용하는 것 같습니다.
CSS에서 "우선 순위"에 대해 이야기할 때, 일반적인 규칙이 관련되어 있습니다. 다른 규칙 뒤에 설정된 규칙이 적용되는 경우(톱다운 방식으로).당신의 경우, 단지 다음을 지정하는 것만으로..smallbox나고끝 .smallbox-paysummary규칙의 우선 순위를 변경할 수 있습니다.
하지만, 조금 더 진행하고 싶다면, 저는 CSS 캐스케이드 W3C 사양을 추천합니다.규칙의 우선 순위는 다음을 기반으로 합니다.
- 현재 미디어 유형;
- 중요성;
- 원산지;
- 선택기의 특수성, 그리고 마지막으로 잘 알려진 규칙:
- 어떤 것이 나중에 명시되어 있습니까?
또한 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>
...디브의 너비는 50인치가 될 것입니다.
W3: W3 캐스케이드 CSS에서 AS 상태
다른 스타일 시트가 적용되는 순서는 다음과 같습니다(W3 계단식 섹션 인용).
사용자 에이전트 선언
사용자 일반 선언
작성자의 통상적인 선언.
중요한 선언을 작성하다.
- 사용자 중요 선언
이에 대한 자세한 내용은 참조된 W3 문서를 참조하십시오.
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 규칙을 재정의합니다.
보다 구체적인 선택기가 덜 구체적인 선택기보다 우선합니다.
코드 뒷부분에 나타나는 규칙은 둘 다 특수성이 동일한 경우 이전 규칙을 재정의합니다.
간단하고 짧은 방법으로 아래의 두 가지 사항을 기억해야 합니다.
- 인라인 CSS는 내장형 및 외부 CSS보다 우선 순위가 높습니다.
- 따라서 최종 순서: 중요 > 인라인 > id 네스팅 > id > 클래스 네스팅 > 클래스 > 태그 네스팅 > 태그로 정의된 값
언급URL : https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css
'programing' 카테고리의 다른 글
| 제외 레코드 데이터에 대한 SQL 쿼리 (0) | 2023.09.03 |
|---|---|
| 스팬 요소에 도구 팁을 추가하려면 어떻게 해야 합니까? (0) | 2023.09.03 |
| Tomcat mariadb 연결 구성 (0) | 2023.09.03 |
| javascript/jquery를 사용하여 'a' 요소 클릭 시뮬레이션 (0) | 2023.09.03 |
| 명령줄에서 특정 PowerShell 함수 호출 (0) | 2023.09.03 |