CSS 선택기 선택기는 CSS 웹 페이지 레이아웃의 기초입니다. CSS 선택자는 정확히 무엇이며 합리적으로 사용하는 방법은 무엇입니까? 선택기는 세 가지 범주로 나눌 수 있습니다. HTML 선택기의 첫 번째 범주를 제외하고 다른 두 범주의 이름을 직접 지정할 수 있습니다. 이름을 지정할 때 의미를 포함하거나 필요한 주석을 추가하여 코드를 더 명확하고 읽기 쉽게 만듭니다. .
HTML 선택기 태그 선택기
HTML 선택기는 DIV, TD, P, H1 등과 같은 HTML 태그입니다. CSS로 정의하면 CSS 기사에서 제어하는 페이지에서 이 태그의 속성이 정의에 따라 표시됩니다.
예를 들어, H1의 색상을 빨간색으로 지정하려면 H1 {color: red}입니다. 여기에서는 규칙에서 여러 선택기를 정의할 수 있는 CSS의 기능을 알아봅니다. 예: H1, H2, TD {색상: 빨간색}. 이 정의에 따르면 모든 H1, H2 및 TD가 빨간색이 될 수 있습니다. 특정 용도에서는 동일한 설정을 가진 여러 속성을 결합하고 작성하여 코드를 줄일 수 있습니다.
클래스 선택자 클래스 선택자
클래스 선택기에는 두 가지 유형이 있습니다. 하나는 HTML 태그와 관련된 관련 클래스 선택기입니다. 해당 구문은 tag.Classname {property:value}입니다. 예를 들어, H1 전체가 아닌 일부의 색상을 빨간색으로 설정하려고 합니다. H1.redone {color: red}: 첫 번째 H1은 빨간색이지만 두 번째 H1은 빨간색이 아닙니다.
두 번째 유형은 독립적인 클래스 선택자입니다. 모든 HTML 태그에서 사용할 수 있습니다. 구문은 다음과 같습니다. Classname {property: value} 다음과 같은 정의가 있으면 blueone {color: blue}를 다른 태그에 적용할 수 있습니다. 클래스 선택기가 우리에게 더 많은 자유와 플레이 공간을 제공한다는 것은 매우 분명합니다.
ID 선택기 ID 선택기
실제로 ID 선택기의 기능은 독립 클래스 선택기의 기능과 매우 유사합니다. 차이점은 구문과 사용법이 다르며 자바스크립트가 HTML 요소를 조작하는 데 도움이 된다는 것입니다. 레이아웃에서는 ID 선택기를 사용하여 다양한 구조 영역을 정의하는 경우가 많습니다.
구문은 #IDname {property:value}와 같습니다. 다음과 같은 정의 #yelowone {color: yellow}가 있다고 가정합니다. 여기서는 text와 같이 동일한 ID 이름을 가진 모든 태그에 이 정의를 적용할 수 있습니다. ID 선택기가 독립 클래스 선택기와 동일한 기능을 갖고 있는데 왜 둘 다 존재합니까? ID가 있는 HTML 요소는 JavaScript로 조작할 수 있습니다.