目次
セレクターの種類
ユニバーサルセレクター
*ページ上のすべての 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セレクター
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;
}擬似要素セレクター
擬似要素セレクターには、2 つの連続した英語のコロンを含むセレクターがあります (要素として理解できますが、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;
}div と p は両方ともラベル セレクターであり、重みは 1 であるため、上記のセレクターの重みは 2 です。累算後は 2 になります。
2. 矛盾する場合は、重み付けスタイルを選択します。
同じタグのスタイル設定間に競合がある場合は、より重みの高いスタイルを使用します。
3. 重みの近接原理
ラベルに 2 つのクラス セレクターが同時に設定されており、2 つのクラス セレクターによって設定されたスタイルが競合する場合は、最後に定義されたセレクターが使用されます。
近接性の原則は、セレクターが定義されている順序に基づいて、最後に定義されたものを選択することです。