내 코드에 영향을주지 않는 CSS 선택자

질문

나는 930px의 최소 width에 대한 미디어 쿼리를 만들고 있습니다. 내 문제는 내가 처음이기 때문에 이것 또는 저것의 문제점을 파악하고 다른 장소에서 여백 패딩 등을 변경하려고 노력하고 있다는 것입니다.

결국, 문제가 무엇인지 알아 냈지만 문제가 아니었기 때문에 .top 선택자가 비어 있다고 가정 해 봅시다. 하지만 이제 CSS가 작동하는 방식을 변경하기 때문에 해당 선택자를 삭제할 수 없습니다.

 

@media (min-width: 930px) {
      .hero-bg {
        text-align: left;
      }
      .top p {
        margin: 0 0em 2em;
      }
      .bottom
      .top{
      }
      .form-container{
        margin: 2em 0 0;
        padding: 0 em;
        border-radius: .5em;
        box-shadow: 10px 10px 10px rgba(0,0,0,.4);

Expand snippet

 

.top을 꺼내려고하는데 마진에 영향을 미치고 그 이유를 모르겠습니다.

 

답변1

이 때문입니다

.bottom
.top { }

.bottom .top 로 번역되고 .top 줄만 꺼내면 .bottom .form으로 번역되므로 빈 선택기가 아닙니다. -container

정말 빈 선택자는 다음과 같습니다.

.bottom { }     /* safe to take out */
.top { }        /* safe to take out */
.form-container { ... }

답변2

.top p는 상단에 해당하는 단락에 영향을 미치기 때문입니다. top 및 top p를 제거하고 .top p를 별도의 class로 만든 다음 해당 여백을 원하는 class를 호출하십시오.

 

 

 

 

출처 : https://stackoverflow.com/questions/62616967/css-selector-that-has-nothing-in-them-affecting-my-code