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: , 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

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 element;

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!