목차
선택기 유형
범용 선택기
*페이지의 모든 HTML 요소를 선택하는 범용 선택기
* {
text-align: center;
line-height: 50px;
}태그 선택기
태그 선택기는 태그 이름을 기반으로 HTML 요소를 선택합니다.
p {
color: red;
width: 100px;
height: 50px;
border: 1px solid burlywood;
}클래스 선택자
클래스 선택자는 특정 클래스 속성을 가진 HTML 요소를 선택합니다. 시작하다
.class-selector {
width: 100px;
height: 50px;
background-color: aquamarine;
}아이디 선택기
id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다. 시작하다
#id-selector {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid gray;
}속성 선택기
속성 선택기는 해당 속성 및 속성 값을 기반으로 요소를 선택할 수 있습니다. 속성 선택기에는 []가 포함됩니다.
[title="properties-selector"] {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid goldenrod;
}의사 클래스 선택자
유사 클래스 선택자는 일반적으로 영어 콜론(:)이 앞에 오는 선택자를 나타냅니다(클래스 선택자로 이해될 수 있지만 요소에 클래스 이름을 추가하지 않음).
.fake-selector {
margin-top: 10px;
width: 100px;
background-color: blueviolet;
}
/* 伪类选择器 */
.fake-selector:hover {
background-color: red;
}의사 요소 선택기
의사 요소 선택기에는 두 개의 연속된 영어 콜론이 있는 선택기가 있습니다(요소로 이해될 수 있지만 html 레이아웃에서는 명시적으로 표시되지 않습니다).
.fake-element-selector {
margin-top: 10px;
width: 100px;
border: 1px solid brown;
}
/* 伪元素选择器 */
.fake-element-selector::after {
width: 30px;
height: 30px;
content: "伪元素选择器";
background-color: blue;
}예시 요약
<template>
<div class="selector-container">
<!-- 标签选择器 -->
<p>标签选择器</p>
<!-- 类选择器 -->
<div class="class-selector">类选择器</div>
<!-- id选择器 -->
<div id="id-selector">id选择器</div>
<!-- 属性选择器 -->
<div title="properties-selector">属性选择器</div>
<!-- 伪类选择器 -->
<div class="fake-selector">伪类选择器</div>
<!-- 伪元素选择器 -->
<div class="fake-element-selector">伪元素选择器</div>
</div>
</template>
<script>
export default {
name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
margin: 10px;
}
/* 通用选择器 */
* {
text-align: center;
line-height: 50px;
}
/* 标签选择器 */
p {
color: red;
width: 100px;
height: 50px;
border: 1px solid burlywood;
}
/* 类选择器 */
.class-selector {
width: 100px;
height: 50px;
background-color: aquamarine;
}
/* id选择器 */
#id-selector {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid gray;
}
/* 属性选择器 */
[title="properties-selector"] {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid goldenrod;
}
.fake-selector {
margin-top: 10px;
width: 100px;
background-color: blueviolet;
}
/* 伪类选择器 */
.fake-selector:hover {
background-color: red;
}
.fake-element-selector {
margin-top: 10px;
width: 100px;
border: 1px solid brown;
}
/* 伪元素选择器 */
.fake-element-selector::after {
width: 30px;
height: 30px;
content: "伪元素选择器";
background-color: blue;
}
</style>관계 선택기
자손 선택자
유효한 모든 하위 요소를 선택합니다. 공간 연결
<template>
<div class="selector-container">
<div class="parent">
<div class="child1">
1
<div class="child">1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
<div class="child">
2
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
margin: 10px;
}
.parent .child {
color: blueviolet;
font-size: 26px;
}
</style>
인접 자손 선택자
자식 요소만 선택하면 손자, 증손자 등의 요소가 무시되므로 "자식 선택자"라고도 하며 >와 연결됩니다.
<template>
<div class="selector-container">
<div class="parent">
<div class="child1">
1
<div class="child">1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
<div class="child">
2
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
margin: 10px;
}
div {
color: black;
font-size: 16px;
}
.parent > .child {
color: blueviolet;
font-size: 26px;
}
</style>
형제 선택자
현재 요소 뒤에 있는 모든 일반 형제 요소를 선택하고 ~로 연결합니다.
현재 요소 뒤의 요소와 현재 요소 앞의 요소는 일치하지 않습니다.
<template>
<div class="selector-container">
<div class="parent">
<div class="child1">
1
<div>1-0</div>
<div class="child">1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
<div class="child">
2
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
<div class="child3">
3
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>
<p>1111111</p>
<div class="child">
4
<div>4-1</div>
<div>4-2</div>
<div>4-3</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
margin: 10px;
}
.child ~ div {
color: blueviolet;
font-size: 26px;
}
</style>
이웃 형제 선택자
현재 요소에 인접한 일반 형제 요소만 선택하고 +로 연결합니다.
<template>
<div class="selector-container">
<div class="parent">
<div class="child1">
1
<div>1-0</div>
<div class="child">1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
<div class="child">
2
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
<div class="child3">
3
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>
<p>1111111</p>
<div class="child">
4
<div>4-1</div>
<div>4-2</div>
<div>4-3</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
margin: 10px;
}
.child + div {
color: blueviolet;
font-size: 26px;
}
</style>
선택기 무게
체중 분포
태그 선택기 가중치: 1
클래스 선택기 가중치: 10
ID 선택기 가중치: 100
원칙적으로
1. 가중치 누적 가능
div p {
color: aquamarine;
}위 선택자의 가중치는 2입니다. 왜냐하면 div와 p가 모두 레이블 선택자이고 가중치가 1이기 때문입니다. 누적 후에는 2입니다.
2. 충돌하는 경우 가중치 스타일을 선택합니다.
동일한 태그에 대한 스타일 설정이 충돌하는 경우 가중치가 더 높은 스타일을 사용하세요.
3. 무게의 근접 원리
두 개의 클래스 선택기가 동시에 레이블에 설정되고 두 클래스 선택기에 의해 설정된 스타일이 충돌하는 경우 마지막에 정의된 선택기가 사용됩니다.
근접성 원칙은 선택자가 정의된 순서에 따라 마지막으로 정의된 것을 선택하는 것입니다.