본문 바로가기
728x90
300x250

CSS 명시도2

css 변경 안됨 ( 명시도가 높은 규칙 재정의 하기) 만약 css를 분명히 정의를 했는데 변경이 안된다면 명시도가 높은 코드에 재정의가 제대로 되지 않아서 일 수도 있다. 명시도 높은 코드 재정의 방법 #someElement p { color: blue; } p.awesome { color: red; } 예를 들어 위의 코드를 실행해 보면 #someElement 안에 있는 p.awesome 태그라면 빨간색 color 값은 실행되지 않는다. id + 태그 조합의 위 쪽 코드가 명시도가 더 높기 때문이다. 이럴 경우 #someElement 안에 있더라도 p.awsome의 css를 재정의 할 방법은 없을까? 명시도가 높은 규칙 재정의 하기 1) !important 사용하기 p.awesome { color: red !important; } !important를 사.. 2022. 5. 5.
css 명시도란? + 명시도(Specificity) 계산하기 CSS 명시도란? 우선 mdn사이트에서 정의한 명시도에 관한 설명을 확인해 보자 설명이 좀 어려운듯 그러니까 명시도란 css선택자가 해당 요소를 얼마나 구체적으로 표현하느냐에 따라 점수를 매겨 숫자가 높을 수록 우선순위가 높아지며 가장 명시도가 높은 속성이 해당 요소에 적용된다. 명시도 계산방법 명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정된다. 여러 선언의 명시도가 같은 경우 css 맨끝에 선언이 요소에 적용된다. css 선택자의 우선순위 선택자 적용 예시 선택자 우선 순위 혼용 방식의 점수 산정 !important !important; 속성 기준 가장 우선 속성 기준 가장 우선 inline-style style="" 1 요소 기준.. 2022. 5. 1.
728x90
반응형