Must-read CSS authoritative guide notes

The following editor will bring you a must-read CSS authoritative guide note. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Chapter 1 css and documentation

1, element: replacement element (img input), non Replace elements (most spans).

2, link: rel (representing relationship: stylesheet, candidate stylesheet: alternate stylesheet); type (text/css); media: (all (all presentation media, screen, print), title (coordinating candidate Use).

3, @import url(sheet1.css) needs to be used within style, placed before other css rules.

4, backward accessibility: c9ccee2e6ea535a969eb3f532ad9fe89 ec215043bdf388cef3089450b29e5d92531ac245ce3e4fe3d50054a55f265927, older browsers will ignore style, and browsers that can understand CSS can read the style sheet normally.

5, CSS comments: /* */.

Chapter 2 Selectors

1. When grouping statements, be sure to use points at the end of each statement. No.

2, p.warming.help {background:red;} only matches p elements whose class contains warming and help. If p contains warming and others, it cannot match

3. , in fact, the browser does not check the uniqueness of the id in the html, but this will make it more difficult to write the dom

4, attribute selector: h1[class] {...}

#. ## h1[class=''] {...} Exact match

h1[class~=''] {...} Partial match [class^=''] What does it start with [class$ =''] ends with what [class*=''] contains all elements

*[lang|='en']Specific attribute selector, will select the lang attribute equal to en or starting with en- All elements.

5, select child elements: h1>strong; select adjacent sibling elements h1+p (h1 and p have a common parent element, and finally select p). Link pseudo-class: unvisited link: link, visited link: visited (they are both static), equivalent to 8f1663f1a1021d031485f1b9a8aaa766

Dynamic pseudo-class: focus. :focus, mouseover:hover, activation: active. (Dynamic pseudo-class can be used for any element)

Recommended pseudo-class order: link-visited-focus-hover-active

Select. The first child element (:first-child), which is easy to misunderstand, is all the first child elements (in the following example, the elements as the first child elements include the first p, the first li and strong and em).

<p>
    <p>helooo</p>
    <ul>
        <li>111</li>
        <li><strong>222</strong></li>
    </ul>
    <p>
        <em>333</em>
    </p>
</p>

Select according to language (:lang()), such as *:lang(fr){color:red;} This turns all French elements into red.

Pseudo element selector: first letter: first-letter, the user agent dynamically forms the pseudo element4cf5accdc40730dafd31ecc4246713c2;

First line: first-line;

Before and after:before :after.

The above is the detailed content of Must-read CSS authoritative guide notes. For more information, please follow other related articles on the PHP Chinese website!