WEB/CSS
[CSS] 특수성(특이성)
애플쩀
2022. 5. 25. 14:45
css특수성(특이성)?
동일한 요소를 가리키는 두 개 이상의 CSS 규칙이 충돌나는 경우 어떤 규칙에 따라 우선순위가 정해진다.
특수성을 계산하는 방법 (점수)
- 0 부터 시작
- inline CSS 적용방법: 1000점 인라인 스타일 적용방식이 가장 우선순위가 높다 .
- <h1 style=""></h1>
- id 명 100 점
- #mydiv{}
- 클래스명 10점
- .mydiv{}
- 속성, 의사클래스 ,속성 선택자 각각 1점
- CSS 태그명 1점. 나중이 우선순위
- * (모든것을 나타내는 태그 ) 0 점
- !important를 주면 제일 우선수위가 높다. ->전부다 무시되고 이것이 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a { /* 1점 */
color: red;
}
p>a { /* 1+1 =2점 */
color: green;
}
div > p>a { /* 1+1+1 =3점 */
color: green;
}
#midiv p a{/* 100+1+1 =102점 */
color:aqua;
}
div#midiv p a{/* 1+100+1+1 =103점 */
color:aqua;
}
a{
color:yellow !important;
}
</style>
</head>
<body>
<pre>
css특수성(특이성)?
동일한 요소를 가리키는 두 개 이상의 CSS 규칙이 충돌나는 경우 어떤 규칙에 따라 우선순위가 정해진다.
inline CSS 적용방법: 1000점 인라인 스타일 적용방식이 가장 우선순위가 높다 .
<!-- <h1 style=""></h1> -->
id 명 100 점
#mydiv{}
클래스명 10점
.mydiv{}
속성, 의사클래스 각각 1점
CSS 태그명 1점. 나중이 우선순위
* (모든것을 나타내는 태그 ) 0 점
!important를 주면 제일 우선수위가 높다. ->전부다 무시되고 이것이 적용
</pre>
<p>
<a href="#" class="button"><button>button1</button></a>
</p>
<div id="myDiv">
<p>
<a href="#" class="button"style="color:red;"><button>button2</button></a>
</p>
<p>
<a href="#" class="button"><button>button3</button></a>
</p>
</div>
</body>
</html>