이번에는 HTML에서 정의된 유효하지 않은 다중 클래스 속성을 다루겠습니다. HTML에서 다중 클래스 속성을 정의할 때 유효하지 않은 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
HTML을 작성하는 과정에서 클래스 속성에 대해 여러 값을 정의하는 경우가 많지만, 정의한 값이 유효하지 않은 경우도 종종 발견됩니다! ! !
과거에 이런 상황이 발생했을 때 직접 다시 작성하거나 ID를 사용하여 CSS 속성을 설정했는데 오늘 생각해보니 뭔가 잘못된 것 같습니다. . . 진실을 찾아야 해요! ! !
<div id="p" class="middle_div padding_10"> <span id="s" class="normal_span"></span> </div>두 클래스에 설정한 색상이 다릅니다. middle_div에 설정한 색상은 빨간색이고, padding_10에 설정한 색상은 녹색입니다.
결과가 녹색입니다. 방향이 반전되었습니다. !
그래서 두 위치를 바꿔봤는데 여전히 초록색이었어요! !
이것. . . .
그렇죠? ? ?
CSS 파일을 열고 padding_10이 middle_div 앞에 있는지 확인합니다. 그런 다음 위치를 바꿉니다.
브라우저를 새로고침하세요. 빨간색! ! !
그래서 여러 클래스 값을 정의할 때 가장 좋아하는 스타일을 마지막에 꼭 넣어주세요!
하지만 padding_10 앞에 div를 추가하고(상위 요소가 div라고 가정) div.padding_10으로 변경하면 어디에 있든 p div가 항상 녹색이라는 것을 알 수 있습니다.
From this CSS 스타일의
우선순위는 나중에 html에서 class 속성의 위치에 따라 결정되는 것이 아니라 CSS 파일이 로드될 때 결정된다는 것을 예제에서 볼 수 있습니다.
Other 관련 기사를 주목하세요!
관련 읽기:선택 윤곽 요소로 글꼴과 그림을 스크롤하는 효과를 얻는 방법
위 내용은 HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!