Web front end "third" CSS Selector

I. Overview of CSS

CSS is cascading style sheets abbreviation, Chinese is called cascading style sheet, the rendering and layout of HTML tags

A CSS rule consists of two main parts: a selector, and one or more declarations.

For example

Ii. four ways to introduce CSS

1. In-line

Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

2. Built-in

Embedded is a set of CSS styles that are written in the

3. Link-type

Build a index.css file, store the style

In the main page, INDEX.CSS introduced

4. Import type

Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the

Note the path to the import ....

Note:

The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. When using a link , it is not the same as importing it, it will load the CSS file before the main body of the Web page file, so the displayed page will be styled from the beginning , and it won't display the style-free web page as it was imported, This is a link-style advantage.

So it is recommended to use the link-type ...

Third, pay attention to nested rules

1. Block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
2. There are several special block-level elements that can contain only inline elements and cannot contain block-level elements. such as H1,h2,h3,h4,h5,h6,p,dt
3. A div can be included in Li
4. Block-level elements are tied to block-level elements, inline elements, and inline elements.

Third, the CSS selector

1. Base Selector

The selector indicates the object of the style in {}, which elements in the Web page the style acts on

1. Universal Element Selector *: All labels are discolored

2. Tag Selector: Matches all styles using the P tag p{color:red}

3.id selector: Matches the specified label #p2 {color:red}

4.class class selector: Who can change the color of a class, choose Multiple. c1{color:red} or Div.c1{color:red}

Instance

Attention:

You can set the length-to-width for block-level labels
It is not possible to set the length width of the inline tag (it will only change depending on the size of his text)

<! DOCTYPE html>
2. Combo Selector
    1. Descendant selector (no hierarchy, just let p label color). C2 p{color:red}     2. Descendant selector (only found at son level). c2>p{color:red}    3. Multi-element selector: matches all specified elements simultaneously  . Div, P{color:red}
Or
. C2. c3,.c2~.c3{
color:red;

font-size:15px;
}
    Not used    
3. Adjacent selector (next to each other, look for the next, only the following, do not find the above). c2+p{color:red}
4. Brother selector: The same level, very close. c2~p{color:red}
　  5. Multi-element selector:. c2. c3,.c2~. c3{color:red}
Description of the multi-element selector. A1. A2,. a1~p{            Color:blue;            font-size:15px;            background-color:red;        }        #下面的两个就相当于上面的一个, separating with commas can reduce the reuse of code        . A1. a2{            Color:blue;            font-size:15px;            background-color:red;        }        . a1~p{             Color:blue;             font-size:15px;             background-color:red;        }
Example
<!    DOCTYPE html>
3. Property Selector
E[att]          matches all e elements that have the ATT attribute, regardless of its value. (Note: E can be omitted here.)                such as "[cheacked]". to the same. )   P[title] {color: #f00;}  E[att=val]      match all att attributes equal to "Val" e element   div[class= "error"] {color: #f00;}  E[att~=val]     matches all ATT attributes with multiple space-delimited values, one with a value equal to "Val" for the e element                td[class~= "name"] {color: #f00;} E[attr^=val]    matches the attribute value to specify the value at the beginning of each element                                    div[class^= "test"]{background: #ffff00;} E[attr$=val]    matches the attribute value to specify each element at the end of the value    div[class$= "Test"]{background: #ffff00;} E[attr*=val]    matches each element of the attribute value that contains the specified value    div[class*= "Test"]{background: #ffff00;}
　　
Index.css
/*1. Match all Haiyan attributes and just */div[haiyan]{Color:yellowgreen in the div tag    ;} /*2. Match all Haiyan=wawa and just */div[haiyan=wawa]{Color:aqua in the div tag        ;    } /*2. The priority above and the following priority should be the same *//* should be shown below, however, because the above range is wider than the following, it will also show the above. *//*3. Match all properties to Haiyan, and have multiple spaces split values, *//* one is equal to Wawa */div[haiyan~=wawa]{            color:blueviolet;        }/*4. Matches the attribute value to specify each element at the beginning of the value, and is the */div[haiyan^=w]{background-color:aquamarine in the div tag            ;        } div[egon^=w]{            background-color:aquamarine;        } /*5. Match attribute values to specify each element at the end of the value  */div[haiyan$=a]{            background-color:blueviolet;        } /*6. Match each element of the attribute value that contains the specified value */div[haiyan*=a]{            background-color:blueviolet;        }
<! DOCTYPE html>
4. Pseudo-Class
Anchor pseudo-class: Designed to control the display effect of links
"'        a:link (links that have not been contacted) are used to define the general state of the link.        A:hover (the state on which the mouse is placed on the link) for creating visual effects.                a:visited (visited links), used to read articles, can clearly judge the links that have been visited.                A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.                pseudo-Class selectors: pseudo-class refers to the different states of the label:                           a ==> point over state no point over state mouse hover state activation state                A:link {color: #FF0000}/* not visited link */                a:visited {C Olor: #00FF00}/* Visited link */                a:hover {color: #FF00FF}/* Mouse moved to link */                a:active {color: #0000FF}/* Selected link */format: Tag: pseudo Class name {CSS code;} '
Example Description <! DOCTYPE html>
　　
before afterPseudo class
: Before    p:before       insert content before each <p> element      :        after p:after inserts a sample after each <p> element     : p:before{ Content: "Hello"; color:red;display:block;}
5.css Precedence and inheritance
Inheritance of CSS
Inheritance is a major feature of CSS, and it is dependent on the ancestor-descendant relationship. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a body-defined color value is also applied to the text of a paragraph.
body{color:red;}       <p>helloyuan</p>
This text has been inherited by body {color:red;} The color of the style definition. However, the weight of CSS inheritance is very low, it is 0 lower than the weight of ordinary elements.
P{color:green}
Discover that you only need to add a color value to overwrite the color of the style it inherits. Thus, any rule that displays a declaration can override its inheritance style.
In addition, inheritance is an important part of CSS, and we don't even have to think about why it's possible, but there are limitations to CSS inheritance. Some properties cannot be inherited, such as: border, margin, padding, background, etc.
div{  border:1px solid #222}<div>hello <p>yuan</p> </div>
Cthe priority of the SS
The so-called CSS precedence refers to the order in which CSS styles are parsed in the browser.
The particularity of the style sheet describes the relative weights of the different rules, and its basic rules are:

1 The weights of the inline style sheet are highest style= ""------------1000;
2 The number of ID attributes in the statistics selector. #id--------------100
3 Number of class attributes in the statistics selector: class-------------10

4 the number of HTML tag names in the statistics selector. P---------------1
By adding the number of strings to bits by these rules, the final weight is obtained, and then the comparison is based on the left-to-right order.
1. The style priority in the text is 1,0,0,0, so it is always higher than the external definition.　　   2, there is!important declaration of the rules above all.　　3. If the!important declares a conflict, the priority is compared.　　4, if the priority is the same, according to the order in the source code to decide, later on the home. 5. The style obtained by inheritance has no specificity calculation, it is below all other rules (such as the rules defined by global selectors *).
Inheritance Example
<! DOCTYPE html>
Web front end "third" CSS Selector