Tag:Pseudo class

  • “Interview questions” JS summary of high frequency interview questions 01 “Zhou Geng”


    Interview questions of this week: Brief introduction of CSS selector and its priority What’s the difference between pseudo classes and pseudo elements? Do you know what BFC is? What is BFC? BFC rules? What problems can BFC solve? How to center? (6 ways) Talk about the box model? 1. CSS selector and its priority The […]

  • “Extreme Edition” does not mix water, uses pure CSS to realize super SA form verification function


    Author: Chen dayudou github: KRISACHAN I wrote an article last yearImplementation of pure CSS form verificationShortly after its publication, some netizens told Yutou that they planned to share this article with the team. After hearing the news at that time, the fish head grinned in front of the screen, but the next paragraph of the […]

  • On CSS pseudo element & the magical use of pseudo class


    CSS plays a very important role in a web page. In recent years, with the development of CSS, pseudo elements / pseudo classes have also been widely used: in the current performance is more and more valued, CSS pseudo elements / pseudo classes outside the document stream are worthy of the “king without crown”! The […]

  • CSS link style


    Hyperlinks are one of the basic elements of web pages. We can see hyperlinks in almost every web page. As I mentioned earlier, hyperlinks will bring some default styles. For example, unlinked hyperlinks will display underlined blue fonts, the fonts will turn red when clicking, and the fonts will turn purple after clicking. This inconsistent […]

  • Realization of triangle by CSS


    In a recent project page, there are many triangle icons. Without considering ie compatibility, CSS is used to implement triangles. Record the code. 1. Solid triangle angle, use transparent to realize triangle (1) Set the line width 50px, div width height 0, the effect is as shown in the following figure, there are multiple triangles. […]

  • Selectors and pseudo class selectors, pseudo elements


    Basic selector 1. ID name 2. Class 3. * wildcard 4. Label selector compound selector Intersection selector 1.div.box{ /*The class name of div tag is box*/ } 2. .box.box1{ /*With box class name and. Box1 class name*/ } Union selector .box,box1{ /*Tags labeled box and box1*/ } Relation selector 1. > progeny selector son as […]

  • CSS selector and priority


    Selector classification id selector <div id=”wrap”></div> #wrap{ background: black; } Class selector <div class=”wrap”></div> .wrap{ background: black; } tag chooser div{ margin:0; } attribute selectors <input type=”text”> [type=text] { background: black; } Pseudo class selector Pseudo classes of element a: link, visited, active, hover. other(1) Li: first child {}(2) Li: last child {}(3) Li: nth […]

  • How to clear floats


    1、 Why clear floatsWhen the child element is set to float, the height of the parent element will collapse to 0, affecting the page layout How to clear floatingAdd pseudo class before and after the parent element to support the parent element to use the clear:both To clear the float .clear-float:after,.clear-float:before{ Content: ‘// fill in […]

  • CSS layout of group avatar based on wechat


    css ul,li{ list-style: none; margin: 0; padding: 0; background-color: #eee; } ul{ width: 240px; height: 240px; } .li{ outline: 1px solid #fff; display: flex; } /*There’s only one picture*/ .li:only-child{ height: 100%; align-items: center; } /*2 pictures*/ .li:first-child:nth-last-child(2), .li:first-child:nth-last-child(2) + li{ width: 50%; height: 50%; } .li:first-child:nth-last-child(2) + li{ margin-left: auto; } /*3 pictures*/ .li:first-child:nth-last-child(3), […]

  • There are four categories of CSS selectors: basic, combination, attribute and pseudo class


    What is a selector? The function of the selector is to find the element and pass the CSS style to the element! CSS selector is mainly divided into four categories: basic selector, attribute selector, combination selector and pseudo class selector! CSS basic selector The basic selectors are divided into: * wildcard, tag selector, class selector, […]

  • HTML5 / CSS3 knowledge summary


    May you be treated gently by the whole world Add semantic tags Header: header label NAV: navigation tab Article: article content label Section: block level label Aside: sidebar label Footer: bottom label be careful: Semantic tags are mainly for search enginesCan be used in the interface many times, mainly suitable for mobile terminal developmentIn IE9, […]

  • High fill when picture is not loaded


    scene Some pictures have a certain width and are highly adaptive. When the pictures are not loaded, the height is 0,When the loading is completed, the height of the page will be opened, which will cause the page to flicker and shake during this process thinking By defaultpaddingThe percentage value of is referenced by the […]