Turn from: Http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.htmlCSS selector and introduction of various style reference methods
A good interface, is a web to attract people's biggest selling point.
CSS: Cascading Style sheets (Cascading style sheets), which defines how HTML elements are displayed.
1. Classifier syntax structure for selectors:
1.1 ID Selector 1.1.1 Format
#id : The id;id of the #+ element is case-sensitive.
1.1.2 Example
#title1 {Background-color:blue;border-width:thick;}
1.2 Class Selector 1.2.1 format
. ClassName : Name of the. +class class; Class name is case-sensitive.
1.2.2 Example
. posttitle {Background-color:green;}
1.3 Element (label) name Selector 1.3.1 Format
element name : The name of the element is not case-sensitive.
1.3.2 Example
h2 {Background-color:green;}
1.4 Composite Selector 1.4.1 Format
element name 1, element name 2,#id,. ClassName : Depending on the name, ID, and class name of the element, the elements that match the condition can have the same style, and each selector condition is separated by a semicolon (,) .
1.4.2 Example
H2, #subid,. Subclass {Background-color:green;}
1.5 Hierarchy Selector 1.5.1 format
Parent Selector Sub-selector : satisfies the sub-selector condition under the parent selector, separated by a space between the two.
1.5.2 Example
① the parent selector as an element
div Input{background-color:green}/* Represents the input child element under DIV */
The ② parent selector can be a class, an ID selector, or a child selector.
. Showinfo_tabel tr{height:20px;}/* indicates that when the table class is Showinfo_tabel, the following TR element height property is 20px */
1.5.3 Display Pictures
1.6 Pseudo-class selector 1.6.1 format
Other selectors Pseudo class Selector
1.6.2 Description
The behavior selector is preceded by : and followed by the pseudo-class name. There are 5 main (CSS1 and 2):
①a:link Select all links that have not been visited
②a:visited Select all links that have been visited
③a:active Select Active link
④input:hover the element above the mouse hover
⑤input:focus gets the element to focus
1.6.3 Example
1. If you do not want a link to change the element after access, you can set the non-access and access of the A tag to the same color
A:link,:visited{color:blue;}
2. Mouse hover (enter) of the element: such as the "Login" button discoloration.
. btn_login:hover {background-color: #218fd5;}
2. How CSS styles are stored
Styles can be stored in a file that is specially styled (external style sheet), in the
2.1 External style Sheet 2.1.1 Storage method
stored in a special style table. A file that is suffixed with CSS.
2.1.2 Citation method
In the
2.1.3 Application ScenariosMultiple page pages share styles, such as: layout of forum posts.
2.2 Internal Sample Table 2.2.1 Storage methodIn the
2.2.2 Usage ScenariosA single page-specific style.
2.3 Inline Style 2.3.1 Storage methodelement in the Style property.
<input type= "text" style= "" value= "Input1"/>
2.3.2 Usage ScenariosSpecial elements for special occasions.
3. Priority of the styleWhen an element attaches many levels of style, for example, the outer style contains this element, the inline style also contains this element, and so on, the style takes the union Way.
If there are elements that intersect , the style attribute is determined as follows:
3.1 Non-sibling referencesAn external style sheet, an inner style sheet, and an inline style all set one of the same style properties for this element.
3.1.1 Priority comparisonInline styles > Internal style sheets > external style Sheets
For the same style property, the value is the highest priority.
3.1.2 ExampleThe width property of the input tag, which is actually 120px;
3.2 Sibling referencesmultiple style selectors in an external style sheet or inner style table contain this element.
3.2.1 Priority ComparisonExternal style sheet, internal style sheet case: ID Selector > class class selector > Element selector.
Inline style case: The value that follows the same property style.
3.2.2 ExampleShow Picture:
================================== Series Article ==========================================