En CSS, necesitamos definir un estilo para un elemento. Primero, tenemos que seleccionar este elemento. He leído muchos artículos en Internet, y combinado con la esencia de la charla del profesor, clasificaré los selectores más utilizados y compartiré con ustedes, ja ¡Haha estudien juntos y progresen juntos!
Tabla de contenido
Selector de comodines
（*）
Indica que todos los elementos están seleccionados.
*{
margin: 0;
padding: 0;
}
/*设置所有的HTML标签的外边距和内边距为0*/
Selector de ID
(#ID)
Agregue un atributo id al elemento y use un # en la hoja de estilo para seleccionar el elemento.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 50px;
width: 100px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="box1">
I am box1
</div>
</body>
</html>
Selector de clases
（.className）
Agregue un atributo de clase a un tipo de elemento que necesita estilo, y luego seleccione un tipo de elemento por medio de un .aa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{
color: #FFFFFF;
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="aa">I am one</div>
<div class="aa">I am two</div>
<div class="aa">I am three</div>
</body>
</html>
Selector de etiquetas
Utilice el nombre de la etiqueta directamente para seleccionar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: coral;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span>
</body>
</html>
Resultado de la operación
jajaja ... Puedes descargar tus imágenes favoritas para jugar
Selector de descendientes
(父元素 子元素)
Seleccione los descendientes de un elemento, que pueden ser hijos o nietos.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 a{
background-color: #FF7F50;
}
img{
width: 350px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1">
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not an a tag</span>
<img src="img/pig.jpg"/>
</body>
</html>
resultado de la operación
Selector de niños
(>)
El símbolo es>, solo se selecciona el hijo , no los nietos y sus descendientes. (Note la diferencia entre esto y la descendencia)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1>a{
background-color: #FF7F50;
}
#box1>p{
background-color: #FF7F50;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p and a tag</span>
</body>
</html>
resultado de la operación
Selector de combinación
Separar los selectores individuales con una coma es la unión de los resultados de la selección de estos selectores.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a,p,div,span{
color: red;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span>
</body>
</html>
resultado de la operación
Selector de pseudoclase (énfasis)
：
a:link{
/*未访问状态*/
}
a:visited{
/*已访问状态*/
}
a:hover{
/*鼠标悬停状态*/
}
a:active{
/*激活选定状态（鼠标点击未释放时）*/
}
Nota: Este orden no se puede cambiar, es
fácil de recordar: "AMOR ODIO"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="https://www.qq.com/">我是腾讯，点点我</a>
</body>
</html>
Selector de hermanos vecinos
Selector adyacente
+
Afectado es el (adyacente) después del signo +
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2+p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
Selector de hermano
~
Los hermanos se ven afectados, ninguno
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2~p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
Selector de atributos
语法：标签名[属性名]{规则}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[href] {
color:red;}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">兰亭序，点我</a>
</div>
</body>
</html>
Estos son todos los selectores de uso común que he compilado. Si es útil para usted, por favor deje sus preciosas huellas de manos jajaja, bienvenido a me gusta + comentar + seguir! Estudien juntos y progresen juntos. ¡La vida se vuelve hermosa gracias al aprendizaje!
