CSS ID 선택기와 클래스 선택기의 차이점

이전 섹션에서는 몇 가지 기본 선택자를 소개했습니다.

id와 class 속성은 웹페이지에서 함께 작동하여 페이지 전체를 다채롭게 만듭니다. . 요소의 스타일을 정의할 때. ID나 클래스를 사용할 수 있습니다. 하지만 우리는 둘 사이의 차이점에도 주의를 기울여야 합니다.

1. CSS 스타일 시트를 작성할 때 ID 선택자 앞에는 접두사 기호 '#'을 추가하고, 클래스 선택자 앞에는 접두사 기호 '.'를 추가해야 합니다.

2. id 속성은 일반적으로 한 페이지에서 한 번만 사용할 수 있지만 클래스는 여러 번 참조할 수 있습니다.

3. ID는 요소의 태그로 사용되어 다양한 구조와 내용을 구분하고, 클래스는 어떤 구조와 내용에도 적용할 수 있는 스타일입니다.

4. 레이아웃 아이디어 측면에서는 일반적으로 id가 페이지의 구조와 내용을 결정한 다음 스타일을 정의하는 원칙을 따릅니다. 반대로 클래스는 스타일 유형을 정의합니다. 먼저 필요에 따라 페이지의 다양한 요소와 콘텐츠에 클래스 스타일을 적용합니다.

5. 현재 브라우저에서는 동일한 속성 값을 가진 여러 ID가 동일한 페이지에 표시되는 것을 허용하고 있지만, JavaScript를 사용하여 ID를 통해 요소를 제어하는 ​​경우 오류가 발생합니다. .

6. 실제 응용 프로그램에서 클래스는 텍스트 섹션 및 페이지 수정에 더 많이 사용되는 반면, id는 블록 또는 상자 스타일을 포함하는 그랜드 레이아웃 및 디자인을 구현하는 데 더 많이 사용됩니다.

참고:

ID는 우선순위가 높고 고유한 특성을 갖습니다. "개인".
ID에 비해 클래스의 우선순위는 상대적으로 중간 정도이며, 특히 '특정 그룹'을 지칭합니다.
클래스를 사용하려면 객체지향 추상 개념을 참조하고 공통 속성을 추상화해야 합니다.

ID는 먼저 구조/콘텐츠를 찾은 다음 이에 대한 스타일을 정의합니다.
클래스는 먼저 스타일을 정의한 다음 이를 여러 구조/콘텐츠에 적용합니다.