CSS 선택기
CSS의 선택기는 기본적으로 스타일을 지정하려는 요소를 선택하는 데 사용되는 CSS 규칙 집합의 일부입니다. CSS 선택기는 ID, 클래스, 유형, 속성 등에 따라 HTML 요소를 선택합니다.
선택기의 유형
CSS에는 다양한 유형의 선택자가 있습니다. 일부는 다음과 같습니다.
자세한 내용을 읽어 보겠습니다.
범용 선택기
Universal Selector는 CSS에서 *입니다. 말 그대로 별표 문자입니다. 기본적으로 모든 유형과 일치하는 유형 선택기입니다.
<div> , <body> , <p> 또는 기타 태그와 같은 HTML 태그를 의미하는 유형입니다.일반적인 용도는 다음과 같이 범용 재설정에 있습니다.
* {
margin: 0;
padding: 0;
}
예시:
유형 선택기
유형 선택기는 주어진 노드 이름을 가진 모든 HTML 요소를 선택합니다. 예를 들어 "a"는 모든
<a> 요소를 선택하고 CSS 속성 값을 적용합니다. "Input"은 모든<input> 요소를 선택하고 "span"모든<span> 요소 등을 선택합니다.정의된 네임스페이스를 사용하여 유형 선택기를 해당 네임스페이스 내의 요소로만 제한할 수도 있습니다.
통사론:
elementname{
/* CSS property */
}
예시:
클래스 선택자
.class 선택기는 특정 클래스 속성에 속하는 모든 요소를 선택하는 데 사용됩니다. 특정 클래스의 요소를 선택하려면 클래스 이름을 지정하는 마침표(.) 문자를 사용합니다. 즉, 클래스 속성의 내용을 기반으로 HTML 요소와 일치합니다. 클래스 이름은 주로 CSS 속성을 주어진 클래스로 설정하는 데 사용됩니다.
통사론:
.class {
/*CSS property*/
}
예시:
ID 선택기
CSS id 선택자는 id라는 속성이 있는 경우 HTML 페이지의 모든 요소를 선택합니다. 이 속성의 값은 id 선택자의 이름과 일치합니다.
스타일시트 문서에서 id 선택자 이름 앞에는 "#"이 붙습니다. id 선택자가 다른 이상의 선택자와 결합된 경우 id 선택자 앞에 #를 붙여야 합니다. ID는 HTML 페이지에서 고유해야 합니다. 즉, 단일 HTML 페이지의 여러 요소에 동일한 ID를 지정할 수 없습니다.
통사론:
#id {
/* CSS property */
}
예시
하위 선택기
CSS 자식 선택자는 다른 요소의 자식인 요소를 선택합니다.
x, y 및 z가 세 개의 HTML 요소이고 z가 y의 시작 및 종료 태그 내에 있고 y가 x의 시작 및 종료 태그 내에 있는 경우; 그런 다음 y는 x의 자식으로 호출됩니다. z는 y의 자식이라고 합니다.
<x>
<y>
<z></z>
</y>
</x>
자식 선택자를 작성하는 동안 선택자는 ">"결합자로 구분해야 합니다.
통사론:
parent > child{
/* CSS property*/
}
예시:
자손 선택자
Descendant 연결자는 단일 공백을 사용하여 표시됩니다. 첫 번째 선택자는 조상(부모, 부모의 부모 등)을 나타내고 두 번째 선택자는 자손을 나타내는 두 선택자를 결합합니다. 첫 번째 선택자와 일치하는 조상 요소가 있는 경우 두 번째 선택자와 일치하는 요소가 선택됩니다. 후손 선택자는 후손 연결자를 사용합니다.
통사론
selector1 selector2 {
/* CSS property */
}
예시:
인접한 형제 선택자
다른 요소 바로 뒤에 있지만 그 하위 요소가 아닌 요소를 찾습니다.
예를 들어,
h4 바로 뒤에 오는 모든 단락에 녹색 텍스트가 있지만 다른 단락에는 없는 경우 다음 CSS 규칙을 사용합니다.통사론
selector1 + selector2 {
/* property declarations */
}
예시:
Reference
이 문제에 관하여(CSS 선택기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ravikumar1002/css-selector-389g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
