Explain the new tags in HTML5 and the pseudo classes and pseudo elements in CSS3

InfoQ 2021-10-14 01:23:50
explain new tags html5 html


{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"html5 / css3 The basic chapter ( Chapter one )","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" review ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Yes , You read that right ! Today is a new beginning , Today we're going to start h5 and c3 了 ,html and css We have come to an end .html A total of two ,css Gone through 7 piece , If the foundation is not familiar , I suggest you take a look at css and html The basic chapter . From today on, we will start a new journey , Enter into h5 and c3 It's a part of . Now work is basically for html/html5、css/css3 Is a rigid requirement . So next h5 and c3 In my study, I will go to a higher level on the basis of the original . Look forward to a new understanding !","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" A real code artifact —— vs code","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vs code It should be a necessary development tool for many developers , The market share of this tool is far ahead , So it's the same for front-end developers , Choose a good development tool to get twice the result with half the effort .","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" frequently-used vs code plug-in unit ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The plug-in is vs code One of the most distinctive features , Using plug-ins can improve development efficiency and diversified development methods . Here are some examples of the most commonly used plug-ins and advanced plug-ins in future work :","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"chinse —— chinese ( Simplified Chinese character ) Language pack ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"open in Browser ——— Right click and select browser mode to open html","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"js-css-html Formatter —— Every time you save , Will be automatically formatted .js css and html Code ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"auto Rename Tag —— Automatically rename paired html/xml label ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css peek —— Finally to style ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Advanced plug-ins :","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"auto close tag —— Automatically generate a closed tag when entering the tag name ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"auto Rename Tag —— Tail closed label synchronous modification ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Bracket Pair Colorizer —— Highlight matching brackets in different colors ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Highlight Matching Tag —— Highlight match tags ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Code Spell Checker —— Word spell check ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"import Cost —— Introduce package cost checker ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Version Lens —— View the latest version of the import package ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a0/a09e9dac57957dcd49ce71c7b35cdf38.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" Be careful : Although plug-ins are very easy to use , But remember, for beginners , Proficiency in writing code is an essential skill , Therefore, it is suggested that this automatic completion or other plug-ins should not be used too often in the early stage , Try to write by yourself , After that, if you are proficient, you can turn on the function of automatic completion .","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"HTML5 Semantic tags ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html5 In short, yes Hypertext markup language (html) The fifth major revision of , It involves a wide range of contents and is used more now , Therefore, this amendment is especially proposed , be called html5. For this time html Added many semantic tags ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// Head tag \n
\n\n// Navigation tag \n\n\n// Content labels \n
\n\n// Block level label \n
\n\n// Sidebar labels \n\n\n// Tail label \n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above is basically this time html5 New tags , You can try the effect in the code output , If the page is laid out, you can use these tags to increase semantics , More friendly to search engines . besides , The mobile terminal prefers these tags .","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"HTML5 New multimedia tags ","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Audio tags audio","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Another important point this time is the addition of audio tags and Video Tags ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// Audio tags \n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Common properties of audio tags . For some compatibility problems, you can write two forms of files mp3、ogg","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"autoplay:autoplay —— If the attribute appears , The audio will play as soon as it is ready ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"controls:controls —— If the attribute appears , The control is displayed to the user , For example, play button ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"loop:loop —— If the attribute appears , Then it will play automatically whenever the audio ends ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"src:url —— Audio to play url","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3c/3c25b6e3b8ff6567e9d31fdbe2d45b10.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Video Tags video","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In addition to audio, there is another attribute of video , Video can also have compatible modes like audio ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// Video format \n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Common properties of video ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"autoplay:autoplay —— Video ready to play automatically (Chrome The browser needs to add muted To solve the autoplay problem )","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"controls:controls —— Show the user the playback controls ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"width:px( Pixels ) —— Set the playback width ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"height:px( Pixels ) —— Set the playback height ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"loop:loop —— Whether to continue looping after playing ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"preload:auto( Preload video )/none( Video should not be loaded ) —— Specifies whether video is preloaded ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"src:url —— video url Address ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"poster:imgurl —— Load the waiting picture 、","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"muted:muted —— Silent play ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cf/cf228354159299e5f272e56b38a1873c.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The video type involves many attributes , You can try the use of these attributes . I don't want to show them all here , But be careful when Google browser has banned the automatic playback of audio and video , So you need to add... To the video muted Mute attribute to realize automatic playback ","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"HTMl5 form properties ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Again , In addition to the new audio and video ,html5 The form has also been added , These labels usually represent a form , for example type by email Words , Then the input box will automatically verify whether it is email, If not, the user will be prompted to enter the correct email Address .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// newly added A number of type attribute \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In addition to these new type Beyond value , stay input A lot of attribute values have been added to the , You can be on your own vs code Try these properties , You will use these attributes frequently in your future work , Even want to build one in the future npm package , Write your own ui Components These are also things you must know ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// It means this input Is required , Can't be empty \n\n\n// It means this input Is auto focus after the page is loaded \n\n\n....\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"required:required —— This attribute indicates that its content cannot be empty ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"placeholder: Tip text ( Place holder ) —— Tips for the form , Default values exist and will no longer be displayed ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"autofocus:autofocus —— Auto focus properties , Automatically focus on the specified form after the page is loaded ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"autocomplete:off/on —— When the user starts typing in the field , The browser displays in the field based on previously typed results ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"multiple:multiple —— Multiple documents can be submitted ( Use... In uploaded files )","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/87/878aa73caf47981de63f90e5e2383bdd.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"css3 Attribute selector ","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Attribute selector ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Attribute selectors are usually written like this :a[b]: The choices indicated are b Attribute a Elements , Therefore, many ways of writing attribute selectors can be extended from here ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"a[b = “val”] —— Choose to have b Property and the value of the property is equal to val Of a Elements ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// It means choosing input in type=“text” The elements of \ninput[type=\"text\"]{\n color: red\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" Be careful : Class selectors 、 Attribute selector 、 Pseudo class selector Weights are 10","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Structure pseudo class selector ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" So it's called Pseudo class selector Because it's not really a class selector , stay Chrome There are still differences between debugging panels and classes .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:first-child —— matching div The first element in ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:last-child —— matching div The last element in ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:nth-child(n) —— Match the... In the parent element n Sub elements n It could be a number 、 keyword 、 The formula .","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" Be careful :n It can also be even( It means even number ) odd( It means odd ) n It can also be a formula , from 0 Start ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"html structure \n\n
\n
1
\n
2
\n
3
\n
4
\n
5
\n
6
\n
7
\n
8
\n
\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The results of the run are as follows :","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/71/713c316c960299288563f8bc6e74f496.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" In addition, you can specify a selector of type ","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:first-of-type —— Specify the type div One of the first ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:last-of-type —— Specify the type div The last ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"div:nth-of-type(n) —— Specify the type e Of the n individual ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/35/35b785ffea1ac8ad236cde903934564e.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"css Pseudo class elements ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Pseudo class elements are also treated as a top priority in work and learning , Because a lot of pseudo class elements will be used in future work , Especially small icons or small things on picture styles , Most of them use pseudo class elements , There are two basic common pseudo elements before、after","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":":before —— Insert content in front of the element ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":":after —— Insert content after the inside of the element ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It is worth noting that :","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"before、after Must have content attribute ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"before In front of the content ,after After the content ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"before and after Create an element , All belong to inline elements ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":" Because in dom There are no pseudo elements in it , So we call this kind of element Pseudo elements ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":" Pseudo elements are like tag selectors , The weight of 1","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In general, if a large picture or content has a small icon Or other elements , You can directly use pseudo elements to represent . This kind of scene is very common , have access to “ The son is the father ” To move to the right place .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Okay , Today's h5 and c3 The first article of comes to an end , Recently, the author is still very busy , If you have any questions, please feel free to leave a message ~","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Today, let's learn a poem recorded before .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" South song child words two / New willow branch words -- wen tingyun ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" A foot deep is better than Qu dust , Old things are better than new ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Acacia walnuts end up hating , Li Xuyuan came to see someone else ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Wait a candle at the bottom of the well , Gonglang's long line, don't go ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Linglong dice with red beans , I know not when I miss you to the bone ","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" translation ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" She wore a long crimson dress and was covered with light yellow after a long time , Since ancient times, old things can't be more likable than new things ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" You and I should have been as faithful as walnuts , Where do you think there is someone else in your heart , Let me hate you after all ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Light candles at night and deeply charge you , It's a long way to go. Don't forget the return date ","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Small delicate dice embedded in the meaning of acacia red beans , Lovesickness you know ?","attrs":{}}]}]}],"attrs":{}}]}
版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211002145414315j.html

  1. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  2. JavaScript数组 几个常用方法
  3. 暢談this的四種綁定方式
  4. 2021最新Vue面试必胜宝典,大厂面试题解析!
  5. Quatre façons de lier ceci
  6. Préparation au développement de l'extension tagdown
  7. Intervieweur: Parlez - moi des flotteurs CSS
  8. Packaging the View Component Library with rollup
  9. Comment un composant enfant modifie les valeurs passées par le composant parent
  10. Résumé de l'API Express
  11. Optimisation de la structure du Code if else dans le projet
  12. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  13. 新手学前端的方法是什么 自学前端该怎么规划
  14. 云原生体系下 Serverless 弹性探索与实践
  15. 如何全方位打造安全高效的HTTPS站点(一)
  16. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  17. 从理念到LRU算法实现,起底未来React异步开发方式
  18. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  19. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  20. 云原生体系下 Serverless 弹性探索与实践
  21. 初学者怎么学Web前端?
  22. react
  23. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  24. JavaScript数组 几个常用方法
  25. Angular 依赖注入 - 全面解析
  26. html_day02
  27. 那些年我们前端面试中经常被问到的题!
  28. The starting price of Ducati multistada V2 in North America is less than 100000 yuan
  29. Hls.js 使用文檔
  30. Hls.js travailler avec des documents
  31. Problèmes liés à la précision JS
  32. Copie une partie des propriétés d'un objet à un autre objet
  33. Multiplexage de modules en vuex
  34. Développement multilingue Android, questions d'entrevue pour le développement de logiciels Android
  35. Chen lushai and her best friend Wang Meng play video, fearless of the pressure of public opinion, and in a good mood to dance in a bare back
  36. # Sass速通(四):继承、混合与函数
  37. Vidéo de développement de combat Android, questions d'entrevue rxjava
  38. Bugatti Chiron maintenance cost exposure! One piece for one car, burn money endlessly
  39. android应用开发基础答案,深入理解Nginx
  40. 做了三年前端,你才知道10分钟就能实现一个PC版魔方游戏
  41. Html + CSS + JS implémentation ️ Responsive Lucky Turnover ️ [with full source Sharing]
  42. Ren Jialun, who married young, was in a mess. Now she feels that it is a blessing in disguise
  43. 达梦数据库使用disql生成html格式的巡检报告
  44. React render phase parsing II - beginwork process
  45. Tableau linéaire de la structure des données (dessin à la main)
  46. In 2022, what are the highlights and popular elements in skirts to make skirts more elegant and gentle?
  47. JQuery installation
  48. Exemple de développement Android, dernière compilation de questions d'entrevue Android
  49. Differences and relations between JDK, JRE and JVM, nginx architecture diagram
  50. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  51. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  52. Questions d'entrevue pour les ingénieurs en développement Android, Android Foundation 72 questions
  53. It's kind of Cadillac CT6 to have a Mercedes Benz S-class captain and a 10At entry-level configuration, falling to less than 300000
  54. H6 meets the strong enemy again! The car body has a Cayenne visual sense, breaking 8.8 seconds, and the top configuration is less than 130000
  55. How nginx supports HTTPS and Linux kernel video tutorial
  56. Le martyr se réjouit de sa vieillesse Audi R8 V10 performance Rwd
  57. import 方式隨意互轉,感受 babel 插件的威力
  58. Le mode d'importation peut se déplacer librement pour sentir la puissance du plug - in Babel
  59. Pas de héros en termes de ventes!Du point de vue de la force du produit, la nouvelle version ax7 Mach est plus forte que H6
  60. The vue3 + TS project introduces vant as needed