!important 에 대해서 질문 드립니다.

guide 섹션 - 슬릭 슬라이더 css 상세 디자인 6:57

안녕하세요. 선생님 강의에 따라서 코딩하면서 공부하고 있는데요.

.mockup-slider .slick-arrow {

display: none; 적용이 안 되는 거예요. 선생님 강의에서는 적용이 되었고요. 하지만 안 되는 경우도 있으니 !important 넣어주면 될 거라고 말씀해주셨고요.

이 부분에서 궁금한 점이 생겨서요. 선생님과 똑같이 따라해왔는데 저는 display:none; 이 왜 적용이 안 된 건지 궁금하고요.

혹시 코딩에 있어서 순서의 다름 부분으로 이런 차이가 발생될 수 있는 건지요?

그리고 slick custom css 에서 보면,

.slideshow .slikck-arrow {

display: none !important; 이렇게 slideshow 이곳에 이미 넣어줬잖아요.

그래서 .mockup-slider 에서 display: none;이 적용이 안 된 거였을까요? !important넣어주니깐 적용은 됩니다.

임포턴트는 가급적 적게 쓰는 것이 좋다고 들은 것 같은데요. 이렇게 한번 사용하게 되면 그 다음 요소가 적용되기 위해서 또 사용할 수 밖에 없는 것 같은데요.

말이 너무 길어졌네요..ㅜㅜ그러니깐 선생님과 똑같이 코딩을 해왔는데도 강의에서는 display:none;이 적용되고 저는 적용이 안돼서 important로 해야 적용되는 것과,

적용 안 된 이유가 위에서 !importnant를 넣어준 것 때문에 적용이 안 된 것이 아닐까 하는 궁금증을 여쭙고 싶었습니다.

/* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */
.slideshow .slick-arrow {
  border: 1px solid #000;
  display: none !important;
}
.slideshow * {
  outline: none;
}

/* Review Slider */
.review-slider .slick-dots li {
  margin: 0;
}
.review-slider .slick-dots li button:before {
  opacity: 1;
  transform: scale(0.8);
}
.review-slider .slick-dots li.slick-active button:before {
  opacity: 1;
  color: transparent;
  border: 1px solid #000;
  border-radius: 50%;
  top: -2px;
  transform: scale(0.6);
}

/* Next Prev */
.review-slider .slick-arrow {
  /* border: 1px solid #000; */
  /* z-index: 1000; */
}
.review-slider .slick-prev:before,
.review-slider .slick-next:before {
  color: red;
  content: "\f104";
  font-family: fontawesome;
  color: #000;
  font-size: 30px;
  opacity: 1;
}
.review-slider .slick-next:before {
  transform: rotateY(180deg);
  display: block;
}

/* mockup-slider */
.mockup-slider .slick-arrow {
  display: none !important;
}
.mockup-slider .slick-dots {
  bottom: 10px;
}
.mockup-slider .slick-dots li {
  margin: 0;
}

인프런 커뮤니티 질문&답변

$('.slideshow').slick(

arrows: false

);