2021-1-24 Vacaciones de invierno semanal

Más selectores

Más selectores de pseudoclase

1. primer hijo

Seleccione el primer elemento secundario (debe ser el primer elemento secundario)

/* 选中a元素，并且a元素必须是第一个子元素 */
a:first-child{
    
    
	color: red;
}

<div>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

<div>
    <p>
        Lorem, ipsum dolor.
    </p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

• first-of-type, Seleccione el primer elemento del tipo especificado entre los elementos secundarios

/* 选中的是子元素中第一个a元素 */
a:first-of-type{
    
    
	color: red;
}

2. último niño

Seleccione el último elemento secundario (debe ser el último elemento secundario)

• last-of-type, Seleccione el último elemento del tipo especificado en el elemento secundario

3. nth-child

Seleccione el elemento secundario especificado

/* 必须是a元素，必须是第四个子元素 */
a:nth-child(4){
    
    
	color: green;
}

<div>
    <p>
        Lorem, ipsum dolor.
    </p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

par : palabra clave, equivalente a 2n

/* 必须是a元素，必须是第偶数个子元素 */
a:nth-child(even){
    
    
    color: green;
}

impar : palabra clave, equivalente a 2n + 1

/* 必须是a元素，必须是第奇数个子元素 */
a:nth-child(odd){
    
    
    color: red;
}

4. enésimo de tipo

Seleccione qué elemento de cierto tipo en los subelementos especificados

a:nth-of-type(even){
    
    
    color: red;
}

<div>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

Más selectores de pseudoelementos

1. primera letra

Seleccione la primera letra del elemento

p::first-letter{
    
    
    color: red;
    font-size: 2em;
}

2. primera linea

Seleccione la primera línea de texto en el elemento

p::first-line{
    
    
    color: red;
    font-size: 2em;
}

3. selección

Seleccione el texto seleccionado por el usuario

p::selection{
    
    
    background-color: green;
    color: yellow;
}

Más estilos

transparencia

1. opacidad, Establece la transparencia de todo el elemento y su valor es 0 ~ 1
2. Establecer en la posición del colorcanal alfa( rgba ), su valor es 0 ~ 1, (se puede establecer un lugar por separado)

ratón

usarcursorConfigurar

Caja oculta

1. display:none, No genere una caja
2. visibility:hidden, Genere la caja, simplemente retire la caja visualmente, la caja todavía ocupa espacio.

Imagen de fondo

• La diferencia entre y el elemento img

El elemento img pertenece al concepto de HTML
, la imagen de fondo pertenece al concepto de CSS .

1. Cuando la imagen pertenece al contenido web , se debe utilizar el elemento img
2. Cuando la imagen solo se usa para embellecer la página , se debe usar la imagen de fondo

• Los atributos css involucrados

1. background-image

2. background-repeat

Por defecto, la imagen de fondo se repetirá en abscisas y ordenadas.

3. background-size

Valor predeterminado: contener, cubrir, similar al
valor o porcentaje de ajuste del objeto

4. background-position

Establece la posición de la imagen de fondo.

Valor predeterminado: izquierda, abajo, derecha, arriba, centro (número o porcentaje)

5. background-attachment

Suele utilizarse para controlar si la imagen de fondo es fija.

6. Mezclar imagen de fondo y color de fondo

7. Fondo de bosquejo (taquigrafía)

elemento iframe

<iframe src="" frameborder="0"></iframe>

Generalmente se usa para incrustar otra página en una página web

• Son elementos reemplazables

• Cuadro de línea

• Por lo general, el contenido mostrado depende de los atributos del elemento.

• CSS no puede controlar completamente los estilos que contiene

• Tiene las características de una caja de bloque de líneas.

Usa flash en la página

1. objeto

<object data="" type=""></object>

• 
  Datos de elementos reemplazables : indica la ubicación del
  tipo de recurso : indica el formato del recurso incrustado (formato estándar: MIME)

Tipo de correo de Internet multipropósito MIME (Extensiones multipropósito de correo de Internet): Por
ejemplo, el recurso es una imagen jpg, MIME: image / jpeg

• Puede agregar subelementos: param (que indica parámetros, también conocido como información desconocida)

2. empotrar

<embed src="" type="">

• Elemento reemplazable

src: indica el
tipo de ubicación del recurso : indica el tipo de recurso

3. Escritura compatible

<object data="./example.swf" type="application/x-shockwave-flash">
    <param name="quality" value="high">
    <embed quality="high" src="./example.swf" type="application/x-shockwave-flash">
</object>

Si el navegador puede reconocer el elemento del objeto, entonces se ignora la inserción.
Si no puede reconocer el elemento del objeto, se reconoce la inserción (la inserción no se puede usar como elemento secundario del objeto)