Common CSS3 selectors include: commonly used basic, attribute, pseudo-class, hierarchical (combination) selectors. For specific usage, it is recommended to read [Css selector four categories: basic, combination, attribute, pseudo-class] for the use of selectors There is a basic understanding that the role of a selector is to find elements through it and add attribute styles to it.
Commonly used selectors are: tag, id, class, association (to find a subset through the parent set) combination selector, note that the id in the html page is unique; the basic selector has （/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)several elements /, / : first-line The first line /, / : first-letter The first word / character * /, and then the hierarchical selector has descendants of ab, a> b sub-elements, elements behind a + b (adjacent selectors), followed by pseudo-classes The selector has: hover,: focus focus, :: selection to change the background color of the mouse selection text, and finally the attribute selector (the purpose of the attribute selector is to directly use an attribute on the label) has a basic selector [attribute ], Basic selector [attribute = value], basic selector [attribute ~ = value] space character separated by multiple spaces, basic selector [attribute ^ = value] starts with, basic selector [attribute $ = value] starts with What ends. (Remarks: The tutorial is 16 years old, and the names of some selectors are not very consistent with the current ones. It is recommended that the basic selectors here are still remembered according to pseudo-classes. The four major categories of CSS selectors are dominated by previous blog posts. Messages and comments are welcome in different places. The following are some interesting styles, which are shown below).
专门建立的学习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>
"font" font in css3: / font-family: font type /, / font-size: font size /, / font-style: itailc italic /, / font-weight: control font thickness //, suggest reading [css commonly used The style font controls a variety of font transformations] The content introduction is basically the same.
The common styles of css3 for text styles are letter-spacing: word spacing, word-spacing: word spacing, text-decoration: underscore, text-align: text alignment, text-indent: first flight indent, line-height : Line height, color: text font color, word-break: break-all text breaks. It is often said that it hits the south wall before turning back. Now if the information is entered maliciously in the text, for example, it is this single letter, what should I do? You will find that it does not automatically wrap in the browser, and there is a bottom scroll bar. This html document is displayed from top to bottom, but this page is displayed from left to right. What should I do? See the solution for div.box2, write it yourself Under the browser display, the impression is deeper. Of course, this situation is a few after all. After all, the layout of the page is still beautiful. The Foreigner is no exception!
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>