CSS 기본 선택기

CSS에서 선택자는 스타일을 지정해야 하는 요소를 선택하는 데 사용되는 패턴입니다. ​ ​
속성 선택기는 해당 속성과 속성 값을 기준으로 요소를 선택할 수 있습니다.

세 가지 기본 선택기 유형: 태그 이름 선택기, 클래스 선택기, ID 선택기

참고: 태그에 style=" "을 쓰는 방식은 셀렉터를 전혀 사용하지 않기 때문에 셀렉터가 아닌 CSS를 소개하는 방식이어야 합니다.

1: 태그 이름 선택기
HTML 문서에는 p 태그, h1 태그 등 많은 태그가 있습니다. 문서의 모든 p 태그가 동일한 CSS 스타일을 사용하도록 하려면 태그 선택기를 사용해야 합니다.

html {color:black;}
h1 {color:blue;}
p2{color:silver;}

즉 , 직접 HTML 태그를 선택기로 사용합니다.

2: 클래스 선택자
사용 HTML 문서 전체에서 동일한 태그에 대해 동일한 CSS 스타일을 지정하는 태그 선택기입니다. 그러나 실제 응용에서는 HTML 문서의 동일한 태그가 반복적으로 사용됩니다. 동일한 태그에 다른 CSS 스타일을 할당하려면 클래스 선택기를 사용해야 합니다.
<div class="test">테스트 코드</div>

.test {color:red;border:1px blue solid;}

html 문서에서는 스타일을 제어하기 위해 태그의 여는 태그에 class="xxx"를 추가합니다(입력과 같은 페어링되지 않은 태그는 태그에 직접 배치됩니다). 페이지에 해당하는 CSS 파일에서는 .xxx를 사용하여 가리킵니다. 이 태그를 제어하기 위해 클래스를 정의하여 태그를 찾는 방법을 클래스 선택자라고 부릅니다.

이러한 클래스 정의 방법은 프런트 엔드 개발에서 가장 일반적으로 사용되는 선택기입니다. 여기에는 여러 가지 뛰어난 기능이 있습니다. 서로 다른 태그에 동일한 클래스를 설정할 수 있으므로 하나의 CSS 명령을 사용하여 여러 태그를 제어할 수 있습니다. 많은 코드는 페이지가 수정하기 쉽고 유지 관리가 쉽고 수정하기 쉽다는 것입니다. 둘째, 백그라운드 직원은 클래스의 관련 설정을 사용하지 않으며 백그라운드 직원과 상호 작용할 필요가 없습니다. 또한, js 등을 통해 라벨을 동적으로 변경할 수 있습니다. Classname으로 인해 전체 라벨의 스타일이 변경되므로 프런트엔드 동적 효과를 보다 쉽게 ​​구현할 수 있습니다.

3: ID 선택기
ID 선택기는 클래스 선택기와 유사하지만 차이점은 ID 선택기 장치 재사용할 수 없습니다. XHTML 문서에서 ID 선택기는 CSS 스타일을 하나의 태그에만 할당할 수 있습니다.
<div id="test">테스트 코드</div>

#test {color:red ; border:1px blue solid;}

ID가 있는 HTML 요소는 JavaScript로 조작할 수 있습니다. 또한 ID는 백엔드 개발자가 자주 사용하므로 프런트엔드 개발자는 최소한이어야 합니다. 사용가능.