CSS selector, style sheet import

CSS Notes
1. Selector (Selecter) a total of 9
A. Type selector p{},body{}
B. Descendant selector P h1{}
C.id Select #idname {}
D. class selection. classname{}
E. Universal selection *{} All elements on the page apply styles, which can be used to remove the default on each element
The fill and blank edges of the browser. Can be used to apply styles to all descendants of a particular element, or to skip a first-level descendant
F. Pseudo-Class selection a:link{}
G. Advanced selector IE6 and earlier versions are not supported, avoid the use of advanced selectors that are important for site functionality.
1. Sub-selector and neighboring sibling selector
The child selector selects the immediate descendants of the element #nav >li{}
Neighboring sibling selector h1+p{}
2. Property selector Elemnent[attribute] Select the elements element with attribute
Example1:.intro{border-style:solid;}
[class= "Intro"] {border-style:dotted;}
example2:a[rel~= "Friend"]{}
<a href= "" rel= "friend met colleague" >john Hicks</a>
H. Stacking and specificity
(1) Cascade gives each rule an important degree (author to important, user second, browser or user agent last)
Pass! Important increase the importance of
Order of Importance:
1 user-style labeled!important
2 author style labeled!important
3 Author Styles
4 User Styles
5 styles for browser/user agent Apps
Then the order of rules is determined according to particularity.
(2) particularity
Particulars Four composition Grades: A, B, C, D
If the style is inline style a=1;
Total number of B=id selectors
The number of c= classes, pseudo-classes, and attribute selectors;
The number of d= type selectors and pseudo-element selectors;
such as: #wrapper. dateposted{} particularity: 0,1,1,0 with a value of 10 as a base of 1110
Application: form{width:20em;} general style
Form#search{width:10em;} Special style Overrides

I. Inheritance
child element inherits parent element style
2. Apply a style to a document
There are two ways to attach an external style sheet to a Web page.
A. Links (can be linked to basic stylesheets for all browsers) <link href= "Css/basic.css" rel= "stylesheet" type= "Text/css" >
B. Import (older browsers do not support, import advanced complex styles) <style type= "Text/css" >
<!--
@important URL ("/css/basic.css");
-
</style>
3. Importing styles in a style sheet
@important URL (/css/layout.css);
Role: Reduce the complexity of (X) HTML documents
Note: Avoid more than two layers of import

CSS selector, style sheet import