HTML_HTML/Xhtml_Web 페이지 제작에 여러 클래스 속성이 정의된 경우 잘못된 솔루션

HTML을 작성하는 과정에서 클래스 속성에 대해 여러 값을 정의하는 경우가 많지만, 정의한 값이 유효하지 않은 경우도 종종 발견됩니다! ! !

예전에는 이런 상황이 발생하면 직접 다시 작성하거나 ID를 직접 사용하여 CSS 속성을 설정했지만 오늘 생각해보니 뭔가 잘못된 것 같습니다. . . 진실을 찾아야 해요! ! !

코드 복사

코드는 다음과 같습니다.

저는 2개입니다. 클래스별로 설정된 색상이 다릅니다. middle_div에 설정된 색상은 빨간색이고,

의 결과는 녹색입니다. 방향이 반대!

그래서 두 위치를 바꿔봤는데 여전히 초록색이에요! !

이것. . . .

그럴까요? ? ?

css 파일을 열어서 살펴보세요. 당연히 padding_10이 middle_div 앞에 있습니다.

브라우저를 새로 고쳤습니다. ! !

그래서 여러 클래스 값을 정의할 때 가장 좋아하는 스타일을 마지막에 꼭 넣어주세요!
하지만 padding_10 앞에 div를 추가하면(상위 요소가 div라고 가정) div.padding_10이 되며 어디에 있든 p div는 항상 녹색입니다.

이 예에서 볼 수 있듯이 CSS 스타일의 우선 순위는 나중에 html에서 클래스 속성의 위치에 따라 결정되는 것이 아니라 CSS 파일이 로드될 때 결정됩니다.