CSS 선택자란 무엇입니까?
CSS 선택자는 스타일을 지정할 HTML 요소를 선택하는 데 사용됩니다. CSS 선택자는 ID, 클래스 또는 속성을 기반으로 HTML 요소를 선택합니다.
기본 선택기
범용 선택기:
*기호는 페이지의 모든 요소를 선택하는 데 사용됩니다. 대부분의 개발자는 브라우저에서 기본적으로 제공하는 여백과 패딩을 제거하기 위해 여백과 패딩을 0으로 재설정하려고 합니다. 이는 웹사이트를 방문할 때 브라우저 전반에서 일관성을 유지하는 데 도움이 됩니다.
문법:
*{
// 设置元素样式
}
HTML 예:
<body>
<h1>通用选择器示例</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS 예:
*{
background: black;
color: white;
font-family: 'Poppins';
}
h1{
text-align: center;
}
클래스 선택기:
클래스 선택자는 특정 클래스 속성에 속하는 모든 요소를 선택하는 데 사용됩니다. 특정 클래스가 있는 요소를 선택하려면 클래스 이름을 나타내는 마침표(.) 문자를 사용하세요. 즉, 클래스 속성의 내용을 기반으로 HTML 요소와 일치합니다.
문법:
.class {
// CSS属性
}
HTML 예:
<body>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p>
</body>
CSS 예:
.intro{
background: skyblue;
}
ID 선택기:
id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다. 페이지에 있는 요소의 ID는 고유하므로 ID 선택기를 사용하여 고유한 요소를 선택합니다! 특정 ID를 가진 요소를 선택하려면 파운드(#) 문자 뒤에 요소 ID를 입력하세요.
문법:
#idname {
// 样式属性
}
HTML 예:
<body>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS 예:
#paragraph{
background: skyblue;
}
유형 선택기:
유형 선택기는 문서에서 HTML 태그/요소를 선택하기 때문에 태그 이름 선택기 또는 요소 선택기라고도 합니다.
문법:
element{
// 设置元素样式
}
HTML 예:
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>
CSS 예:
span{
background: skyblue;
}
그룹 선택기
CSS 그룹화 선택기는 여러 요소를 선택하고 함께 스타일을 지정하는 데 사용됩니다. 이렇게 하면 모든 요소에 대한 공통 스타일을 선언하는 데 필요한 코드와 추가 작업이 줄어듭니다. 선택기를 그룹화하려면 각 선택기를 쉼표로 구분하세요.
문법:
element, element{
// 设置元素样式
}
HTML 예:
<body>
<h1>分组选择器示例</h1>
<p>示例CSS选择器。</p>
<h4>示例CSS选择器分组。</h4>
</body>
CSS 예:
h1{
text-align: center;
}
p,h4{
background: skyblue;
}
결합기
조합자는 선택자 간의 관계를 설명하는 데 사용됩니다. CSS에는 네 가지 조합자가 있습니다.
- 하위 선택기(공백)
- 하위 선택기(>)
- 인접한 형제 선택자(+)
- 범용 형제 선택자(~)
하위 결합자(공백)
일반적으로 공백(" ") 문자로 표시되는 하위 연결자는 두 선택자를 결합하여 두 번째 선택기와 일치하는 요소에 첫 번째 선택기의 상위 요소와 일치하는 조상 요소(부모 요소, 부모 요소)가 있는 경우 상위 요소의 상위 요소의 상위 요소 등)을 선택합니다.
문법:
selector1 selector2 {
/* 属性声明 */
}
HTML 예:
<body>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section><p>div中的段落3。</p></section>
</div>
<p>段落4。不在div中。</p>
<p>段落5。不在div中。</p>
</body>
CSS 예:
div p{
background: skyblue;
}
하위 조합자(>)
하위 결합자는 요소 사이의 구분 기호로 보다 큼 기호(>)를 사용합니다. 상위 요소의 직계 자손을 선택합니다. 이 연결자는 문서 트리의 직접 하위 요소만 일치합니다. 두 번째 선택자는 첫 번째 선택자가 상위 요소인 경우에만 선택되므로 하위 선택자보다 더 엄격합니다.
문법:
selector1 > selector2
{
// 样式属性
}
HTML 예:
<body>
<h1>子组合器示例</h1>
<p>子选择器（>）选择指定元素的所有子元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section>
<!-- 不是子元素，但是后代元素 -->
<p>div中的段落3（在section元素内）。</p>
</section>
<p>div中的段落4。</p>
</div>
<p>段落5。不在div中。</p>
<p>段落6。不在div中。</p>
</body>
CSS 예:
div>p{
background: skyblue;
}
인접 형제 결합기 (+)
인접한 형제 연결자는 요소 사이의 구분 기호로 더하기 기호(+)를 사용합니다. 두 번째 요소는 첫 번째 요소 바로 뒤에 있고 둘 다 동일한 상위 요소의 하위인 경우에만 일치됩니다. 이 형제 선택자는 인접한 요소, 즉 지정된 태그 옆에 있는 요소를 선택합니다.
문법:
former_element + target_element
{
// 样式属性
}
HTML 예:
<body>
<h1>相邻兄弟选择器示例</h1>
<p>+选择器用于选择紧跟在另一个特定元素之后的元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
</div>
<p>段落3。在div之后。</p>
<p>段落4。在div之后。</p>
<div>
<p>div中的段落5。</p>
<p>div中的段落6。</p>
</div>
<p>段落7。在div之后。</p>
<p>段落8。在div之后。</p>
</body>
CSS 예:
div + p {
background: skyblue;
}
범용 형제 결합자(~)
범용 형제 결합자는 요소 사이의 구분 기호로 물결표(~)를 사용합니다. 첫 번째 선택기 요소 뒤에 오는 요소와 동일한 상위 요소의 모든 하위 요소를 선택합니다. 공통 상위 요소가 있는 요소 그룹을 선택하는 데 사용할 수 있습니다.
문법:
former_element ~ target_element
{
// 样式属性
}
HTML 예:
<body>
<h1>通用兄弟组合器示例</h1>
<p>通用兄弟选择器（~）选择指定元素的所有下一个兄弟元素。</p>
<p>段落1。</p>
<div>
<p>段落2。</p>
</div>
<p>段落3。</p>
<code>一些代码。</code>
<p>段落4。</p>
</body>
CSS 예:
div ~ p {
background-color: skyblue;
}
의사 선택자
의사 클래스:
사용자 상호 작용으로 인해 요소의 상태가 변경되면 콜론(:)을 사용합니다.
문법:
selector:pseudo-class
{
// property: value;
}
일반적으로 사용되는 의사 클래스는 다음과 같습니다.
- :집중하다
- :필수의
- :체크됨
- :장애가 있는
- :호버
- :방문하다
- :활동적인
이러한 의사 클래스는 문서 트리의 요소 위치와 관련됩니다.
- :뿌리
- :첫 번째 자녀
- :막내
- :독생
- :n번째-자식(n)
- :n번째-마지막-자식(n)
- :not(선택자)
유사 요소:
이중 콜론(::)은 선택한 요소의 특정 부분에 스타일을 지정하는 데 사용됩니다.
문법:
selector::pseudo-element
{
// property: value;
}
일반적으로 사용되는 의사 요소는 다음과 같습니다.
- ::후에
- ::전에
- ::첫 번째 줄
- ::첫 글자 (:첫 글자)
- ::첫 번째 줄 (:첫 번째 줄)
- ::파일 선택기 버튼
속성 선택기
CSS 속성 선택기는 주어진 속성의 존재 여부 또는 값을 기반으로 요소를 일치시킵니다.
[attr]은 attr 속성 이름을 가진 요소를 나타냅니다.
[attr=value]는 attr 속성 이름과 값이 정확히 value인 요소를 나타냅니다.
[attr~=value]는 attr 속성 이름과 공백으로 구분된 단어 목록인 값(그 중 하나가 value임)을 갖는 요소를 나타냅니다.
[attr|=value]는 attr 속성 이름이 있는 요소를 의미하며 값은 정확히 value일 수 있거나 value로 시작하고 뒤에 하이픈이 올 수 있습니다. 일반적으로 언어 하위 코드 일치에 사용됩니다.
[attr^=value]는 attr 속성 이름과 값 접두사가 붙은(접두사가 붙은) 요소를 나타냅니다.
[attr$=value]는 attr 속성 이름과 value를 접미사(suffix)로 갖는 요소를 나타냅니다.
[attr*=value]는 attr 속성 이름과 하나 이상의 value 항목을 포함하는 값을 가진 요소를 나타냅니다.
[속성 연산자 값 i] 닫는 괄호 앞에 i(또는 I)를 추가하면 값(ASCII 범위의 문자에 대해)이 대소문자를 구분하지 않고 비교됩니다.