Los selectores CSS3 comunes incluyen: selectores básicos, de atributo, pseudo-clase, jerárquicos (combinación) de uso común. Para uso específico, se recomienda leer [Css selector cuatro categorías: básico, combinación, atributo, pseudo-clase] para el uso de selectores Hay una comprensión básica de que el papel de un selector es encontrar elementos a través de él y agregarle estilos de atributos.
Los selectores utilizados comúnmente son: selector de combinación de etiqueta, id, clase, asociación (para encontrar un subconjunto a través del conjunto primario), tenga en cuenta que el id en la página html es único; el selector básico tiene （/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)varios elementos /, / : primera línea La primera línea /, / : primera letra La primera palabra / carácter * /, y luego el selector jerárquico tiene descendientes de subelementos ab, a> b, elementos detrás de a + b (selectores adyacentes), seguidos de pseudo-clases El selector tiene: hover ,: focus focus, :: selection para cambiar el color de fondo del texto de selección del mouse, y finalmente el selector de atributos (el propósito del selector de atributos es usar directamente un atributo en la etiqueta) tiene un selector básico [atributo ], Selector básico [atributo = valor], selector básico [atributo ~ = valor] carácter de espacio separado por múltiples espacios, el selector básico [atributo ^ = valor] comienza con, el selector básico [atributo $ = valor] comienza con Lo que termina (Observaciones: el tutorial tiene 16 años y los nombres de algunos selectores no son muy consistentes con los actuales. Se recomienda que los selectores básicos aquí todavía se recuerden de acuerdo con pseudo-clases. Las cuatro categorías principales de selectores CSS están dominadas por publicaciones de blog anteriores. Los mensajes y comentarios son bienvenidos en diferentes lugares. Los siguientes son algunos estilos interesantes, que se muestran a continuación).
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS3选择器和文本字体样式</title>
7 <style type="text/css">
8 div::first-line{
9 color: #f90;
10 }/*第一行*/
11 div::first-letter{
12 font-style: italic;
13 font-size: 24px;
14 }/*第一个单词/字符*/
15 .box>li:first-child{
16 list-style: square;
17 }/*第一个元素*/
18 .box>li:last-child{
19 list-style: none;
20 }/*最后一个元素*/
21 .box>li:nth-child(3){
22 list-style: lower-roman;
23 }/*第n个元素*/
24 div::selection{
25 background-color: red;
26 color: #FFF;
27 }/*::selection更改鼠标选择文本背景色*/
28 input{
29 outline: none;
30 }/*文本聚焦，更换默认边框颜色*/
31 </style>
32 </head>
33 <body>
34 <ul class="box">
35 <li>1</li>
36 <li>2</li>
37 <li>3</li>
38 <li>4</li>
39 <li>5</li>
40 </ul>
41 <div>
42 “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies.It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. "
43 </div>
44 <form action="" method="get">
45 焦点:<input type="text">
46 </form>
47 </body>
48 </html>
fuente "font" en css3: / font-family: font type /, / font-size: font size /, / font-style: itailc italic /, / font-weight: control de grosor de fuente //, sugiere lectura [css de uso común La fuente de estilo controla una variedad de transformaciones de fuente]. La introducción del contenido es básicamente la misma.
Los estilos comunes de css3 para los estilos de texto son el espaciado de letras: espaciado de palabras, espaciado de palabras: espaciado de palabras, decoración de texto: guión bajo, alineación de texto: alineación de texto, sangría de texto: sangría de primer vuelo, altura de línea : Altura de línea, color: color de fuente del texto, salto de palabra: saltos de texto de descanso. A menudo se dice que golpea la pared sur antes de regresar. Ahora si la información se ingresa maliciosamente en el texto, por ejemplo, es esta sola letra, ¿qué debo hacer? Verá que no se ajusta automáticamente en el navegador y hay una barra de desplazamiento inferior. Este documento html se muestra de arriba a abajo, pero esta página se muestra de izquierda a derecha. ¿Qué debo hacer? Vea la solución para div.box2, escríbalo usted mismo Debajo de la pantalla del navegador, la impresión es más profunda. Por supuesto, esta situación es poco después de todo. Después de todo, el diseño de la página sigue siendo hermoso. ¡El extranjero no es una excepción!
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>有意思的word-break:break-all文本折行</title>
7 <style type="text/css">
8 div.box2{
9 word-break: break-all;
10 overflow: auto;
11 }/*word-break:break-all文本折行*/
12 </style>
13 </head>
14 <body>
15 <!--默认文本都是换行的-->
16 <div class="box1">
17 “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies. It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently.
18 </div>
19 <!--但是像这样一些恶意输入文本的,你会发现它在浏览器中不自动换行，而且出现底部滚动条，这个html文档展示一般从上至下，但是这个页面这样从左至右展示，怎么办?解决办法见div.box2-->
20 <div class="box2">
21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
22 </div>
23 </body>
24 </html>