Os seletores CSS3 comuns incluem: seletores básicos, de atributos, pseudo-classe e hierárquicos (combinados) usados com frequência.Para uso específico, é recomendável ler [seletor de Css quatro categorias: básico, combinação, atributo, pseudo-classe] para o uso de seletores Existe um entendimento básico de que o papel de um seletor é encontrar elementos através dele e adicionar estilos de atributo a ele.
Os seletores comumente usados são: tag, id, classe, associação (para encontrar um subconjunto por meio do conjunto pai), observe que o id na página html é único; o seletor básico possui （/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)vários elementos /, / : first-line A primeira linha /, / : primeira letra A primeira palavra / caractere * / e, em seguida, o seletor hierárquico possui descendentes de subelementos ab, a> b, elementos atrás de a + b (seletores adjacentes), seguidos por pseudo-classes O seletor possui: hover ,: focus focus, :: selection para alterar a cor de plano de fundo do texto de seleção do mouse e, finalmente, o seletor de atributos (o objetivo do seletor de atributos é usar diretamente um atributo no rótulo) possui um seletor básico [attribute ], Seletor básico [atributo = valor], seletor básico [atributo ~ = valor] caractere de espaço separado por vários espaços, seletor básico [atributo ^ = valor] começa com, seletor básico [atributo $ = valor] começa com O que acaba. (Comentários: O tutorial tem 16 anos e os nomes de alguns seletores não são muito consistentes com os atuais. É recomendável que os seletores básicos aqui ainda sejam lembrados de acordo com as pseudo-classes. As quatro principais categorias de seletores de CSS são dominadas por postagens anteriores do blog. Mensagens e comentários são bem-vindos em diferentes lugares. A seguir, apresentamos alguns estilos interessantes, mostrados abaixo).
专门建立的学习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>
Fonte "font" no css3: / família de fontes: tipo de fonte /, / tamanho da fonte: tamanho da fonte /, / estilo da fonte: itailc itálico /, / peso da fonte: espessura da fonte de controle / A fonte de estilo controla uma variedade de transformações de fonte] A introdução do conteúdo é basicamente a mesma.
Os estilos comuns de css3 para estilos de texto são espaçamento entre letras: espaçamento entre palavras, espaçamento entre palavras: espaçamento entre palavras, decoração de texto: sublinhado, alinhamento de texto: alinhamento de texto, recuo de texto: recuo do primeiro vôo, altura da linha : Altura da linha, cor: cor da fonte do texto, quebra de palavras: quebra de todos os intervalos de texto. Costuma-se dizer que ele atinge a parede sul antes de voltar.Agora, se as informações forem inseridas maliciosamente no texto, por exemplo, é esta única letra, o que devo fazer? Você descobrirá que ele não é quebrado automaticamente no navegador e existe uma barra de rolagem inferior. Este documento html é exibido de cima para baixo, mas esta página é exibida da esquerda para a direita. O que devo fazer? Consulte a solução para div.box2, escreva você mesmo Sob a tela do navegador, a impressão é mais profunda. É claro que, apesar de tudo, é uma situação. Afinal, o layout da página ainda é bonito. O Estrangeiro não é exceção!
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>