Tabla de contenido
selector descendiente adyacente
Tipo de selector
Selector universal
Selector universal para *seleccionar todos los elementos HTML de la página
* {
text-align: center;
line-height: 50px;
}selector de etiquetas
Los selectores de etiquetas seleccionan elementos HTML según los nombres de las etiquetas.
p {
color: red;
width: 100px;
height: 50px;
border: 1px solid burlywood;
}selector de clase
Los selectores de clases seleccionan elementos HTML con un atributo de clase específico. Empezar con
.class-selector {
width: 100px;
height: 50px;
background-color: aquamarine;
}selector de identificación
El selector de identificación utiliza el atributo de identificación de un elemento HTML para seleccionar un elemento específico. Empezar con
#id-selector {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid gray;
}selector de atributos
El selector de atributos puede seleccionar elementos según sus atributos y valores de atributos. El selector de atributos contiene []
[title="properties-selector"] {
margin-top: 10px;
width: 100px;
height: 50px;
border: 1px solid goldenrod;
}Selector de pseudoclase
Los selectores de pseudoclase generalmente se refieren a selectores precedidos por dos puntos en inglés (:) (que pueden entenderse como un selector de clase, pero no agregan un nombre de clase al elemento)
.fake-selector {
margin-top: 10px;
width: 100px;
background-color: blueviolet;
}
/* 伪类选择器 */
.fake-selector:hover {
background-color: red;
}Selector de pseudoelementos
El selector de pseudoelemento tiene un selector con dos dos puntos en inglés consecutivos (puede entenderse como un elemento, pero no se presentará explícitamente en el diseño 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;
}Resumen de ejemplos
<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>Selector de relaciones
selector de descendientes
Selecciona todos los elementos descendientes válidos. Conexión espacial
<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>
selector descendiente adyacente
Solo seleccionar elementos secundarios ignorará elementos como nietos y bisnietos, por lo que también se le llama "selector secundario" y está conectado con >
<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>
selector de hermanos
Seleccione todos los elementos hermanos regulares detrás del elemento actual y conéctelos con ~.
Tenga en cuenta que los elementos posteriores al elemento actual y los elementos anteriores al elemento actual no coincidirán.
<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>
selector de hermano vecino
Seleccione solo los elementos hermanos regulares adyacentes al elemento actual y conéctelos con +.
<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>
Peso selector
distribución del peso
Peso del selector de etiquetas: 1
Peso del selector de clase: 10
peso del selector de identificación: 100
en principio
1. Los pesos se pueden acumular
div p {
color: aquamarine;
}El peso del selector anterior es 2, porque div y p son selectores de etiquetas y el peso es 1. Después de la acumulación, es 2.
2. En caso de conflicto, elija el estilo de ponderación.
Si hay conflictos entre las configuraciones de estilo para la misma etiqueta, use el estilo con mayor peso.
3. Principio de proximidad del peso
Si se configuran dos selectores de clase en una etiqueta al mismo tiempo y los estilos establecidos por los dos selectores de clase entran en conflicto, se utilizará el selector que se defina en último lugar.
El principio de proximidad es seleccionar el último definido en función del orden en que se definen los selectores.