HTML 요소를 표시할 때 ID에 비해 클래스의 장점을 분석합니다.

웹 페이지에는 매우 복잡한 HTML 구조가 있습니다. CSS를 사용하여 관련 스타일을 정의하는 경우 이러한 구조에 해당하는 플래그를 지정한 다음 해당 CSS 선택기를 작성하여 스타일을 얻어야 합니다. 가장 일반적으로 사용되는 두 가지 주석 속성은 id와 class입니다. 예를 들어

<p class=”header” id=”header” ></p>

이제 속성 선택기와 같은 더 많은 선택 방법이 있습니다. 다만, 속성 선택자를 이용하여 id와 class를 생략할 수는 있으나 추후 유지관리가 불편하고, 초기 브라우저와의 호환성이 좋지 않으며, 브라우저의 렌더링 효율에 영향을 미치는 등의 문제가 있다. 따라서 더 많은 옵션이 있지만 여전히 ID, 클래스 및 요소 이름을 사용하여 CSS 선택기를 구성하는 것이 좋습니다.
id와 class 모두 HTML 구조를 표시할 수 있으므로 무엇을 먼저 선택해야 합니까? 이 기사에서는 이에 대해 논의할 것입니다.

id와 class의 차이

경험이 있는 친구들은 이 부분을 건너뛰셔도 됩니다.

1. 고유성과 반복성

id는 웹페이지 구조에서만 고유할 수 있습니다. ID가 aa인 HTML 요소는 더 이상 존재하지 않습니다. 강력한 브라우저는 여러 중복 ID를 지원하고 해당 스타일을 할당하지만 이는 표준에서 허용되지 않습니다.

반대로, 웹페이지 구조에서는 클래스를 재사용할 수 있습니다. 한 요소의 클래스를 bb로 지정하고, 다음 요소의 클래스를 bb로 지정할 수 있습니다. bb 동시에 스타일. 또한 요소에 대해 여러 클래스 속성 값을 지정할 수도 있으므로 여러 속성의 스타일을 동시에 얻을 수 있습니다.

2. CSS의 우선순위가 다릅니다

CSS 선택자에서 ID와 클래스에 스타일을 적용하는 우선순위가 다릅니다. ID의 스타일 우선순위는 클래스의 스타일 우선순위보다 높습니다. ID가 aa이고 클래스가 bb인 p에 대해 다음 스타일을 지정하면

#aa{background:red;}   
.bb{background:blue;}

그러면 브라우저에 빨간색으로 표시됩니다. 배경.

3. 점프 기능

id 속성을 사용하면 페이지에서 p의 id를 aa로 지정하면 점프 기능이 향상됩니다. 그런 다음 현재 URL 뒤에 #aa를 추가하면 페이지는 즉시 ID가 aa인 p의 위치로 이동합니다. 예: Baidu Encyclopedia 장 점프. 클래스에는 이 기능이 없습니다.

ID 대신 클래스를 사용하는 이유

클래스를 사용하면 어떤 이점이 있나요?

1. 이름을 줄입니다

ID를 사용하여 레이블을 지정하는 것은 정말 번거로운 작업입니다. 구조 이름. 웹 페이지에는 동일한 스타일과 효과(예: 통합 버튼 스타일)를 가진 많은 구조가 있으므로 공통 클래스 스타일을 작성한 다음 이 클래스를 동일한 스타일이 필요한 모든 구조에 할당합니다.

2. 재사용성이 높다

클래스는 다른 구조에서 재사용이 가능하며 특정 요소에 여러 클래스를 적용할 수 있으므로 재사용성이 높습니다. 수업 스타일. 보다 극단적인 실용적인 응용 프로그램은 원자 클래스입니다. 예를 들어:

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

일부 클래스는 가능한 작고 간결하게 작성한 다음 이 스타일이 필요한 사람을 위해 작성합니다(예: 위의 float ) 요소에 직접 클래스를 작성합니다(예: class="fl").
일반 애플리케이션의 경우 동일한 스타일이 필요한 일부 구조의 경우 하나의 스타일만 작성한 다음 이러한 구조에 동일한 클래스를 할당하면 높은 수준의 스타일 코드 재사용이 가능하며 수정이 더 편리합니다. .

3. 낮은 우선순위

클래스의 우선순위는 요소 이름보다 높고 id보다 낮습니다. 이 기능을 사용하면 디버깅 및 스타일 적용이 용이해집니다.

이전에 id를 사용하여 요소를 표시했고 이 요소의 스타일을 수정하려는 경우 해당 CSS 스타일 코드만 수정하거나 특정 스타일에 대해 !important 강조 구문을 사용하여 덮어쓸 수 있습니다. 원래 스타일.

요소가 클래스로 표시되어 있으면 요소에 직접 ID를 추가한 다음 요소 ID에 대한 CSS 선택기를 구성하여 수정하고 덮어씁니다.

이러한 특성 때문에 나중에 유지 관리를 용이하게 하기 위해 클래스를 사용하여 요소를 표시해야 합니다.

4.id도 필수입니다.

클래스가 만능은 아닌데 동시에 마킹을 해야 하는 곳도 많습니다.

5. 앵커 태그 점프

앵커 태그를 사용하여 페이지에서 점프하려면 특정 점프 대상의 ID만 지정할 수 있습니다. 반복적으로 사용할 수 있어 점프 기능은 없습니다.

6. 입력에 사용

입력을 사용할 때 일반적으로 레이블 태그를 사용하여 입력의 기능을 설명합니다. 레이블을 입력과 연결하는 방법에는 두 가지가 있습니다. 하나는 레이블의 for 속성을 사용하는 것입니다. 다른 하나는 해당 입력을 레이블로 래핑하는 것입니다. 분명히 첫 번째 방법이 더 유연하고 우수하지만 해당 입력에 대해 id 속성을 지정해야 합니다.

또한 일부 특별한 요구 사항은 ID를 사용해야 하는데 여기에는 요약되어 있지 않습니다.

최고의 활용 조합

이전부터 클래스에 대한 비판이 많았고, 일부에서는 W3C에서도 사용하던 클래스 태그를 폐지해야 한다고까지 했습니다. 그는 id 속성을 열성적으로 사용하지만 실제로는 점점 더 클래스의 장점을 발견하고 이를 대신 사용하고 있습니다.

더 나은 조합은 클래스를 사용하여 대부분의 요소와 구조를 지정하고 특정 기능이 필요한 극소수의 요소에 ID 주석을 사용하는 것입니다.

HTML 요소 표시 시 ID에 비해 클래스의 장점에 대한 자세한 분석은 PHP 중국어 웹사이트를 참고하세요!