HTML에서 여러 클래스 속성을 정의할 때 잘못된 솔루션 소개

클래스 속성에 여러 값을 정의하세요. 정의된 스타일이 잘못된 경우가 종종 발견됩니다. 테스트 후 여러 클래스 값을 정의할 때 가장 좋아하는 스타일을 마지막에 넣는 것에 주의해야 합니다. 유효하지 않은. HTML을 작성하는 과정에서 클래스 속성에 대해 여러 값을 정의하는 경우가 많지만, 정의한 값이 유효하지 않은 경우도 종종 발견됩니다! ! !

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

코드는 다음과 같습니다.

<p id="p" class="middle_p padding_10"> 
<span id="s" class="normal_span"></span> 
</p>

두 클래스에 설정한 색상이 middle_p에 설정한 색상이 빨간색이고, padding_10에 설정한 색상이 다릅니다.

결과가 녹색으로 표시되어 첫인상이 바뀌었습니다. 방향이 반대입니다!

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

이것. . . .

그럴까요? ? ?

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

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

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

이 예제에서 볼 수 있듯이 CSS 스타일의 우선순위는 CSS 파일이 로드될 때 결정되며 나중에 html에서 class 속성의 위치에 따라 결정되지 않습니다.

HTML에 여러 클래스 속성이 정의된 경우 유효하지 않은 솔루션에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!