Selectors (5) - 선택자 우선순위

 

 

 

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

 

 

 

 

📝 메모

---

 

 

 

🌲대전제

p{
	color:blue;
}

p{
	color:hotpink;
}

cascading의 의미대로.. 뒤에 선언된 스타일이 앞의 스타일을 덮어버린다.

그럼 여기서 paragraph의 글자색은 hotpink가 된다.

 

 

      <article class="card">
        <h1 class="card-title">Yumcoding</h1>
        <p class="card-desc">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat
          eligendi eveniet tempore necessitatibus blanditiis corporis magni
          assumenda. Pariatur, ab molestias.
        </p>
        <a href="#" class="card-link">Youtube</a>
      </article>

 

a{
	text-decoration:none;
}

.card a{
	text-decoration:line-through;
}

.card-link{
	text-decoration:underline;
}

 

과연 어떤 스타일이 적용될까?

(정답은 .card a)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🌿설명

올림픽 순위를 매기는 방식은 2가지가 있다.

금메달이 많은 순, 아니면 금은동메달 총합순

CSS의 경우에는 금메달에 해당하는 선택자가 많을 수록 높은 순위를 가진다.

금 : id 

은: class, pseudo-class

동: type(html tag)

 

 

 

 

 

 

 

 

 

 

 

 

🌱예시

.box{
	color:blue;
}

#box-item{
	color:red;
}

box-item이 아이디 선택자이고 우선순위가 높기 때문에 글자색은 빨간색

 

 

.box p{
	color:black;
}

p{
	color:red;
}

.box p는 은1동1이고 p는 그냥 동1이기 때문에 .box p가 우선적으로 적용됨.

 

 

#bnw.tab-nav

:금1 은1

 

header.main-header

:은1 동1

 

#bnw.tab-nav ul

:금1은1동1

 

 

#bnw.tab-nav ul:last-child

:금1은2동1

 

 

 

 

만약 스타일을 선언했는데 적용이 안된다면

선택자를 살펴봐야한다.

🌠지금 선언한 선택자를 덮어버리는 선택자가 위에 있는지 찾아볼 것.

 

 

 

 

 

 

 

 

 

 

 

 

🔥Rule Breakers🔥

: 위의 모든 우선순위를 파괴해버리는 요소들

 

1. Inline Style

<p style="font-size:32px;">
	blahbalh
</p>

근데 정말 어쩔 수 없는 경우가 아니라면 사용하지 말자,,

 

 

 

2. !important

p{
	color: black !important;
}

금은동, 심지어 인라인 스타일도 이겨버림...

이것도 정말 필요한 경우가 아니면 쓰지 말자,,