>  기사  >  웹 프론트엔드  >  HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.

HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.

php中世界最好的语言
php中世界最好的语言원래의
2018-02-08 09:40:434021검색

이번에는 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 파일이 로드될 때 결정된다는 것을 예제에서 볼 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트

Other 관련 기사를 주목하세요!

관련 읽기:

선택 윤곽 요소로 글꼴과 그림을 스크롤하는 효과를 얻는 방법

HTML
의 TextArea에 형식을 저장하는 방법

위 내용은 HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.