- Escrito al frente: consulte el tutorial de Bilibili Dark Horse Programmer Pink Teacher
- Dirección: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
Tabla de contenido
Selector de CSS compuesto (combinación)
¿Por qué debería aprender el selector compuesto CSS?
Selector de descendientes (énfasis)
Selector de elementos secundarios
Selector de CSS compuesto (combinación)
¿Por qué debería aprender el selector compuesto CSS?
- Los selectores CSS se dividen en selectores básicos y selectores compuestos, pero los selectores básicos no pueden satisfacer nuestro desarrollo real, selección rápida y eficiente de etiquetas.
- El propósito es poder seleccionar etiquetas de elementos de destino más precisas y refinadas .
- Un selector compuesto se compone de dos o más selectores básicos combinados de diferentes formas
Selector de descendientes (énfasis)
- Concepto : el selector de descendientes también se denomina selector de contención
- Rol : se utiliza para seleccionar los descendientes de elementos o grupos de elementos.
- El método de escritura consiste en escribir la etiqueta exterior en el frente y la etiqueta interior en la parte posterior, separadas por un espacio , y escribir primero el padre y el abuelo, y escribir el hijo y el nieto.
父级 子级{属性:属性值;属性:属性值;}
- gramática:
.class h3{color:red;font-size:16px;}
- Cuando las etiquetas están anidadas, la etiqueta interna se convierte en la descendiente de la etiqueta externa.
- Las generaciones futuras pueden elegir este camino. En otras palabras, puede seleccionar cualquier etiqueta incluida.
- Caso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*常山 赵子龙*/
/*山东 济南*/
.nav a {
color: pink;
}
.wang ul li {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<ul>
<li>一条狗</li>
<li>一条狗</li>
<li>一条狗</li>
</ul>
<div class="wang">
<ul>
<li>兜兜是一条狗</li>
<li>兜兜是一条狗</li>
<li>兜兜是一条狗</li>
</ul>
</div>
</body>
</html>Selector de elementos secundarios
- El hijo aquí se refiere al hijo real, no incluye nietos y bisnietos.
- Función : El selector de elementos secundarios solo puede seleccionar elementos que son elementos secundarios (hijos principales) de un determinado elemento.
- Su redacción es etiqueta EDITORIAL padre, etiqueta secundaria escrita en la parte posterior, en el medio con una
>conexión- gramática:
.class>h3{color:red;font-size:14px;}
- Ejemplo:
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
- Caso
- Estilo de visualización:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*后代选择器 选择 子孙后代*/ /*div strong { color: red; }*/ /*子元素选择器 符号 > 只选亲儿子 这些元素 */ div>strong { color: pink; } </style> </head> <body> <div> <strong>儿子</strong> <strong>儿子</strong> <strong>儿子</strong> </div> <div> <p> <strong>孙子</strong> <strong>孙子</strong> <strong>孙子</strong> </p> </div> </body> </html>
Selector de intersección
- Condición: El selector de intersección está compuesto por dos selectores, y las etiquetas encontradas deben cumplir: tanto las características de la etiqueta uno como las características de la etiqueta dos .
- gramática:
- El primero es un selector de etiquetas y el segundo es un selector de clases No puede haber espacios entre los dos selectores , como h3.special.
- Sugerencia : El selector de intersección es y significa. El significado de ... y ...
比如： p.one 选择的是： 类名为 .one 的 段落标签。
- En términos relativos, se usa menos y no se recomienda su uso.
- Caso
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> /*需求，就是让 p 这个 变成红色*/ /*交集选择器 既是p标签 又是 .red 类选择器的关系*/ p.red { color: red; } </style> </head> <body> <p class="red">红色</p> <p class="red">红色</p> <p class="red">红色</p> <div class="red">红色</div> <div class="red">红色</div> <div class="red">红色</div> <p>蓝色</p> <p>蓝色</p> <p>蓝色</p> </body> </html>
Selector de unión (énfasis)
- Aplicación : si algunos selectores definen el mismo estilo, puede usar el selector de unión para hacer que el código sea más conciso .
- Los selectores de unión (agrupación de selectores CSS) se
,forman concatenando varios selectores y generalmente se utilizan para la declaración colectiva .- gramática:
- Cualquier forma de selector (incluido el selector de etiquetas, el selector de ID de selector de clase, etc.) se puede utilizar como parte del selector de unión.
- Sugerencias: Los selectores de unión se suelen utilizar para declaraciones colectivas, separados por comas. Todos los selectores ejecutarán los siguientes estilos. La coma puede entenderse como una suma .
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
- Caso 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*客户需求： p 和 span 和 第一个div 里面的颜色都是红色*/ /*分开写的*/ /*p { color: red; } span { color: red; }*/ /*.red { color: red; }*/ /*并集选择器 用逗号隔开， 逗号理解为 和的意思 通常用于集体声明 就是因为这些选择器 里面的样式 相同*/ p, span, .red { color: red; } </style> </head> <body> <p>我和你</p> <p>我和你</p> <p>我和你</p> <span>我和你</span> <span>我和你</span> <span>我和你</span> <div class="red">我和你</div> <div>我和你</div> <h1>你和我</h1> <h1>你和我</h1> </body> </html>
-
Caso 2
要求： 1. 链接 登录 的颜色为红色 2. 主导航栏里面的所有的链接改为橙色 3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小测验</title> <style> /* 1. 链接 登录 的颜色为红色 */ .site-r a { color: red; } /*2. 主导航栏里面的所有的链接改为橙色 */ .nav ul li a { color: orange; } /*3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。*/ .nav, .sitenav { font: 14px "微软雅黑"; } </style> </head> <body> <!-- 主导航栏 --> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">公司产品</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <!-- 侧导航栏 --> <div class="sitenav"> <div class="site-l">左侧侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body> </html>
Selector de pseudoclase de enlace (énfasis)
- Selector de pseudoclase:
- Para distinguir del selector de clases anterior, el selector de clases es un punto
- Por ejemplo, .demo {} y la pseudoclase usa 2 puntos como dos puntos. Por ejemplo: enlace {}
- Rol :
- Se usa para agregar efectos especiales a ciertos selectores .
- Por ejemplo, para agregar efectos especiales al enlace, por ejemplo, puede seleccionar el primer y el enésimo elemento.
- Hay muchos selectores de pseudoclases, como pseudoclases de enlaces, pseudoclases estructurales, etc.
a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 鼠标移动到链接上 */ a:active /* 选定的链接 */
- Nota
- Al escribir, trate de no invertir su orden de acuerdo con lvha . De lo contrario, puede provocar errores.
- Método de memoria: l o v e ha te me enamoró del odio o lv bag is very ha o
- Debido a que se denomina pseudoclase de enlace, utiliza el selector de intersección a: link a: hover
- Debido a que un navegador de enlaces tiene un estilo predeterminado, necesitamos especificar un estilo por separado para el enlace en el trabajo real.
- En el desarrollo del trabajo real, rara vez escribimos los cuatro estados. Generalmente, lo escribimos de la siguiente manera:
a { /* a是标签选择器 所有的链接 */ font-weight: 700; font-size: 16px; color: gray; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ }
-
Caso 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接伪类选择器</title> <style> /*未访问过链接的状态 正常状态*/ /*p.one 交集选择器*/ a:link { color: #333; /*取消下划线*/ text-decoration: none; } /*已经访问的链接 我们点击过*/ a:visited { color: orange; } /*鼠标经过链接时候的状态*/ a:hover { color: red; } /*当我们点击的时候（按下鼠标，别松开的时候）*/ a:active { color: green; } </style> </head> <body> <a href="http://www.xiaomi.com">小米手机</a> <a href="http://www.dami.com">大米手机</a> <!-- p.one --> </body> </html>
- Caso 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*所以我们实际工作中都需要给链接单独指定样式*/ .nav a { color: #333; text-decoration: none; } /*鼠标放到 nav 里面的链接 才会变色*/ .nav a:hover { color: orange; } </style> </head> <body> <div class="nav"> <a href="#">手机</a> <a href="#">手机</a> <a href="#">手机</a> <a href="#">手机</a> </div> <a href="#">没有妈妈的孩子像棵草</a> </body> </html>
Resumen de selectores compuestos
| Selector | efecto | característica | Uso | Símbolos de separación y uso |
|---|---|---|---|---|
| Selector de descendientes | Se usa para seleccionar descendientes de elementos | Es elegir a todos los hijos y nietos | Más | El símbolo es un espacio. Nav a |
| Selector de niños | Seleccione el elemento más cercano | Solo elige tu propio hijo | Menos | El símbolo es > .nav> p |
| Selector de intersección | Seleccione la intersección de dos etiquetas | Es y es | Menos | Sin símbolo p. Uno |
| Selector de unión | Seleccione ciertos selectores del mismo estilo | Puede utilizarse para declaración colectiva | Más | El símbolo es una coma . Nav, .header |
| Selector de pseudoclase de enlace | Cambiar el estado del enlace | Más | Concéntrese en recordar el desarrollo real de un {} y un: hover |
