키 포인트 CSS 선택기는 CSS 규칙 세트의 중요한 부분이며 HTML 문서의 유형, 속성 또는 위치를 기반으로 특정 HTML 요소를 선택하고 스타일링 할 수 있습니다. CSS 선택기는 범용 선택기, 요소 유형 선택기, ID 선택기, 클래스 선택기, 하위 선택자, 유니버설 형제 자매 선택기, 대리 형제 선택기, 속성 선택기, 의사 클래스 선택기 및 Pseudo-CLASS SELECTORS를 포함한 다양한 유형으로 제공됩니다. 별표로 선언 된 범용 CSS 선택기는 페이지의 모든 요소를 선택하고 요소 유형 선택기는 동일한 이름의 HTML 요소를 찾습니다. 파운드 부호로 선언 된 ID CSS 선택기는 일치하는 ID 속성이있는 HTML 요소를 찾는 반면, 클래스 선택기는 포인트로 선언 된 클래스 선택기가 클래스 속성과 일치하는 모든 요소와 일치합니다. 의사 클래스 및 의사 요소 선택기는 특정 상태의 요소 또는 요소의 특정 부분에 대한 스타일을 허용하는 특수 유형의 선택기입니다 (예 : 호버링 또는 부모 요소의 첫 번째 자식 요소). CSS 선택기는 무엇입니까? CSS 선택기는 CSS 규칙 세트의 일부이며 HTML 문서의 유형, 속성 또는 위치별로 스타일로 요소를 선택할 수 있습니다. 사용 가능한 모든 유형의 선택기를 살펴보고 각각 간단히 설명해 봅시다. 이것은 당신이 참조 할 수있는 간결한 CSS 선택기 빠른 조회 테이블입니다. CSS 선택기 유형 <:> 일반 선택기 : 각 요소 요소 유형 선택기 : 와 같은 특정 유형의 요소. <: :> id selector : id 속성으로 요소를 선택하십시오 (예 : ). <: :> 클래스 선택기 : 클래스 속성별로 요소를 선택하십시오 (예 : ). subsel 선택기 : 요소의 직접 후손 (하위 요소). Universal Brother Selector : HTML의 유니버설 형제 요소. 이웃 형제 선택기 : HTML의 직접 형제 요소. 속성 선택기 : HTML 속성의 존재 및/또는 값을 기준으로 . 의사 클래스 선택기 : 와 같은 의사 클래스의 존재에 기초합니다. pseudo element selector : 요소와 같은 의사 요소의 경우. 범용 CSS 선택기 범용 선택기 와일드 카드처럼 페이지의 모든 요소를 선택하십시오. 각 HTML 페이지는 HTML 태그 내에 배치 된 컨텐츠를 기반으로합니다. 각 태그 세트는 페이지의 요소를 나타냅니다. 범용 선택기를 사용하는 다음 CSS 예제를 참조하십시오. Curly Brace 내부의 세 줄 (색, 글꼴 크기 및 라인 높이)은 HTML 페이지의 모든 요소에 적용됩니다. 여기에 도시 된 바와 같이, 범용 선택기는 별표를 사용하여 선언된다. 다른 선택기와 함께 범용 선택기를 사용할 수도 있습니다. 요소 유형 CSS 선택기 는 "유형 선택기"라고도하며, 이는 동일한 이름의 HTML 요소와 일치해야합니다. 따라서, 선택기는 모든 html nav 요소와 일치하고 선택기는 모든 HTML 비 일류 목록 또는 요소와 일치합니다. 다음 예제는 요소 유형 선택기를 사용하여 모든 nav 요소와 일치합니다. 이를 설명하기 위해 위의 CSS를 적용 할 HTML 부분은 다음과 같습니다. 이 페이지의 일부를 구성하는 세 가지 주요 요소가 있습니다 : 2 개의 . CSS는 가 아닌 두 개의 * { color: green; font-size: 20px; line-height: 25px; }에만 적용됩니다. 요소 유형 선택기를 대신 를 사용하도록 변경하면 스타일은 에 적용되지 않습니다. 또한 스타일은 ul { list-style: none; border: solid 1px #ccc; } 또는 요소 내의 요소에 적용되지 않습니다. 즉, 특정 스타일은 이러한 내부 요소에 의해 상속 될 수 있습니다. id CSS 선택기 id selector는 해시 또는 파운드 부호 (#)를 사용하여 문자열 앞에 선언합니다. 캐릭터 문자열은 개발자에 의해 정의됩니다. 이 선택기는 ID 속성이 선택기의 값과 동일한 값을 갖는 HTML 요소와 일치하지만 해시 기호를 빼냅니다. 예는 다음과 같습니다. 이 CSS는 ID 선택기를 사용하여 HTML 요소와 일치합니다. 이 경우 a 요소는 중요하지 않습니다. 모든 유형의 HTML 요소가 될 수 있습니다. 스타일은 값의 ID 속성이있는 한 적용됩니다. 웹 페이지의 ID 요소는 고유해야합니다. 즉, 주어진 페이지의 하나의 요소 만 의 ID를 가지고 있습니다. ID 선택기 규칙 세트에 사용 된 스타일은 페이지 당 한 번만 사용할 수 있기 때문에 ID 선택기는 융통성이 없습니다. 동일한 ID가있는 페이지에 여러 요소가있는 경우 스타일이 여전히 적용되지만 기술적 인 관점에서 해당 페이지의 HTML이 유효하지 않으므로 그렇게하지 않아야합니다. 유연성 문제 외에도 ID 선택기는 매우 높은 특이성 문제가 있습니다. 클래스 CSS 선택기 클래스 선택기는 모든 CSS 선택기 중 가장 유용합니다. 점으로 선언 된 다음 하나 이상의 문자 문자열이 이어집니다. ID 선택기와 마찬가지로이 문자 문자열은 개발자에 의해 정의됩니다. 클래스 선택기는 또한 클래스 속성을 클래스와 동일한 값으로 설정하여 포인트를 빼는 페이지의 모든 요소와 일치합니다. 다음 규칙 세트를 참조하십시오 : 이 스타일은 다음 HTML 요소에 적용됩니다.* { color: green; font-size: 20px; line-height: 25px; } 동일한 스타일도 box (공간 제한으로 인해 다음 내용이 간단히 요약되며 주요 정보 및 코드 예제가 유지됩니다. 완전한 설명은 원본 텍스트를 참조하십시오.) 대상 콤비너, 서브 콤비너, 일반 형제 콤비너, 인접한 형제 콤비너, 속성 선택기, 의사 클래스 선택기, 의사 요소 선택기 이러한 선택기 조합 방법 및 사용법 방법은 원래 텍스트에서 자세히 설명되어 있습니다. ul { list-style: none; border: solid 1px #ccc; } 대상 콤비너 : 공간을 사용하여 부모 요소 내부의 모든 후손 요소를 선택하십시오. child combinator : , 부모 요소의 직접 자식 요소 만 선택하십시오. Universal Brother Combinator : 사용 , 모든 후속 형제 요소를 선택하십시오. 이웃 형제 콤바이터 : , 다음 형제 요소 만 선택하십시오. 속성 선택기 : 를 사용하여 속성을 기반으로 요소를 선택하십시오. 예를 들어 <..>. 의사 클래스 선택기 : 사용 상태에 따라 요소를 선택하려면 사용하십시오. 예를 들어 , . pseudo element selector : >를 사용하여 요소의 특정 부분을 선택하십시오. 예를 들어 , . FAQ (FAQ) CSS 선택기에 대한 자주 묻는 질문에 대해 자세한 답변은 원본 텍스트에 제공되며 여기에서 논의되지 않습니다. 위의 간단한 요약을 통해 CSS 선택기의 핵심 개념과 사용을 이해하는 데 도움이되기를 바랍니다. 자세한 설명은 원본 텍스트를 참조하십시오. ~
