미디어 쿼리를 사용하여 데스크톱 장치의 스타일을 재정의하려고 하는데 작동하지 않는 것 같습니다. 테두리 색상을 h2 요소로 설정하고 문제를 더 잘 시각화하기 위해 테스트를 수행했습니다. 보시다시피, h2의 테두리 색상은 노란색으로 설정되어 있습니다.
내 SASS 스타일은 다음과 같습니다.
으아악동일 페이지 하단에 미디어 쿼리가 있습니다. 보시다시피 테두리 색상은 빨간색으로 설정되어 있지만 빨간색 테두리 색상이어야 하는데 여전히 노란색 테두리 색상으로 표시됩니다. 유니버셜 스타일에서 노란색 테두리 색상을 제거하면 빨간색으로만 나타납니다.
으아악
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
문제는 기본 CSS에 효과적으로 더 구체적인 선택기가 있다는 것입니다
으아악미디어 쿼리에서 다루고자 하는 내용은
으아악그래서 첫 번째가 승리합니다. 첫 번째에는 클래스 선택자가 4명이 있는 반면, 두 번째에는 클래스 선택자가 3명뿐입니다.
개인적인 경험에 따르면 SCSS나 LESS 같은 것의 진짜 부정적인 측면 중 하나는 이런 함정에 빠질 수 있다는 것입니다. CSS는 "길들이기"와 제어하기가 매우 어려운 도구입니다.
이 문제를 우회할 수 있는 몇 가지 방법이 있습니다. 으아악
미디어 조건부 규칙의 경우. 그러면 확실히 불편함을 느낄 것입니다. 복잡한 선택자는 일단 시작하면 영원히 그 안에 갇히게 되기 때문에 함정입니다.