CSS selectors and how to refer to each style

Quoted from: We all start with the rookie

CSS selectors and how to refer to each style

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 Scenarios
Multiple page pages share styles, such as: layout of forum posts.
2.2 Internal Sample Table 2.2.1 Storage method
In the 
2.2.2 Usage Scenarios
A single page-specific style.
2.3 Inline Style 2.3.1 Storage method
element in the Style property.
<input type= "text" style= "" value= "Input1"/>
2.3.2 Usage Scenarios
Special elements for special occasions.
3. Priority of the style
When 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 references
An 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 comparison
Inline styles > Internal style sheets > external style Sheets
For the same style property, the value is the highest priority.
3.1.2 Example
The width property of the input tag, which is actually 120px;
3.2 Sibling references
multiple style selectors in an external style sheet or inner style table contain this element.
3.2.1 Priority Comparison
External 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 Example
Show Picture: