CSS (i) Introduction mode selector weights

CSS (i)　　

Cascading style Sheet Cascading style sheet

CSS Annotation Method/* * *

First, the introduction of CSS methods

1. Row style style= "key:value; "

    <div style="width:100px;height:100px; Background:yellow; "></div>

2. Page-level CSS is written in the head tag style tag inside the lines (not recommended)

<style>    body{        background:green;    } </style>

　　

[email protected] URL () Introduction also written in the Style tag inside

<style>    @import url (index.css); </style>

　　Upset small posture: 　　 must be written in the style label first line to take effect

This type of introduction can only execute 31 lines in IE6, and the page will load until the CSS is loaded.

4. Link Tag introduction (most commonly used)

<link rel= "stylesheet" href= "Index.css"/>

　　

Second, selector

1. Wildcard Selector

*{}/* All tags include body   disadvantage waste type */

2. Tag Selector and pseudo element selector

ul{/* Tag Selector */    list-style-type:none;}

span::before{/* pseudo-element selector *    /content:' This paragraph is in front of span '/  * Here the content must be written  at least ' otherwise it won't take effect */}span::after{    content:' This paragraph is behind span '            } 

3. Class Selector and Property selector

. wrapper{/* class selector   class*/    border:1px solid Pink;}

[Name='weibin']{/* Property selector is  used to select input*/    background:red;}

4.id Selector

#only {/* Select the element ID is only */    color:red;}

5. Descendant selector (derived selector)

. Wrapper div{/* Here is a selection of  all div*/    floats under wrapper: left;}

6. Descendant Selector

.wrapper>div{/* Here you select the  div child of all the children of wrapper   is just a nested relationship of *    /float: left;}

7. Parallel Selector

Div.box{background:pink}/* Selects no gaps between element selectors that satisfy multiple selectors simultaneously     */

8. Group Selector

Div,p,span{font-size:'14px'*/* Edit multiple selectors at the same time to reduce the CSS redundancy selector, separate */

9. Pseudo-Class selectors

/*Link pseudo-Class*/a:link{}/*for links that have not been accessed*/a:visited{}/*the link after the visit is similar to the number of episodes watched by TV shows grayed out*//*Dynamic Pseudo-class*/a:hover{}/*Mouse Move in*/a:active{}/*when an element is activated*/a:focus{}/*Focus Time*/   

10. Brother Selector

H1 + P {margin-top:50px;} /*H1 and P Select H1 below the p*/

Third, the weight value

Selector Selector	Weight
！ Important	∞
inline style	1000
Id	100
class, attributes, Pseudo-classes	10
tags, pseudo-elements	1
Wildcard characters	0

The weight values, such as the parent-child selector, are added together. CSS is a cascading style sheet if the following weights are the same or greater than or equal to the preceding weights, the style defined above will be flushed out

CSS (i) Introduction mode selector weights