[Grimace original] detailed explanation of the front-end path of backend programmers 02--CSS selector, 02 -- css Selector

[Grimace original] detailed explanation of the front-end path of backend programmers 02--CSS selector, 02 -- css Selector

Directory

• CSS Selector

• CSS Cascade

• CSS inheritance
• Style priority Mechanism

 

I. CSS selector?

Basic Selector

Selector	Example	Description
# Id	# Firstname	ID selector, select the element Id = firstname
. Class	. Myclass	Class selector, select all elements of class = myclass
Element	P	Tag selector, select all <p> Elements

 

 

 

 

Pseudo-class selector

Selector	Example	Description
: Link	A: link	Matches all the links that have not been clicked. It is usually used for the <a> element.
: Visited	A: visited	Match All accessed links.
: Hover	A: hover	Select the link on which the mouse pointer is located. Tip:: The hover selector can be used for all elements, not just links.
: Active	A: active	Match the link activated by the user-the status when the user presses the key and does not release it. In order to produce the expected results, the above four selectors must be arranged in order: Link-: visited-: hover-: active.
: First-child	P: first-child	Select each p element as the first child of its parent.
: Last-child	P: last-child	Select each p element as the last child of its parent.
: Empty	P: empty	Select each p element without any child level (including text nodes)
: Enabled	Input: enabled	Select an enabled input element
: Disabled	Input: disabled	Select a disabled input element
: Checked	Input: checked	Select each selected input element

 

 

 

 

 

 

 

 

 

 

 

 

Relationship-based Selector

Selector	Example	Description
Element, element	Div, p	Select all <div> elements and <p> Elements
Element	Div p	Select <div> all <p> elements in the element (all child elements)
Element> element	Div> p	Select the <p> element of the <div> element for all parent levels.
Element + element	Div + p	Select all <p> elements followed by <div> Elements

 

 

 

 

 

Attribute Selector

Selector	Example	Description
[Attribute]	[Target]	Select all elements with the target attribute
[Attribute = value]	[Target = _ blank]	Select all elements using target = "_ blank"
[Attribute ~ = Value]	[Title ~ = Flower]	Select title attribute inclusionWordAll elements of "flower"
[Attribute * = value]	[Title * = flower]	Select title attribute inclusionStringAll elements of "flower"
[Attribute ^ = value]	[Title ^ = flower]	Select all elements starting with "flower" in the title attribute
[Attribute $ = value]	[Title $ = flower]	Select all elements ending with "flower" in the title attribute

 

 

 

 

 

 

Pseudo object Selector

Selector	Example	Attribute
: After	P: after {content: "hello ";}	In each <p>LabelThe last insert content "hello", usually used with content
: Before	P: before {content: "hello ";}	In each <p>Label"Hello"
: First-letter	P: first-letter	Select the first letter of each <p> element.
: First-line	P: first-line	Select the first line of each <P> element.

 

 

 

 

 

 

 

Ii. CSS Cascade

1. An element style can be defined in multiple ways: 1) browser default style 2) User-Defined Style 3) developer-defined Style

2. Priority between the above methods: developer-defined styles> User-Defined styles> browser default styles

3. There are three types of styles defined by developers:

1) defined as a separate CSS file:Development is mostly in this form, which is easy to maintain and expand

2) defined in the <style> </style> label on the html page:This method is applicable when the current page is independent and there are few styles.

3) directly write it in the style attribute of the element:It is recommended that the test is only applicable and the maintenance line is poor..

Q: IfSame weight(See the Fourth point below) which CSS style is used?

A: To sum up one sentence: "proximity principle", who should be the first to be close. So the three priorities: 3> 2> 1

Iii. CSS inheritance

CSS inheritance is a rule that allowsSome stylesIt can be applied not only to elements but also to future generations.

For example, color can be inherited. In the following code, the text of the <p> tag along with the sub-level <span> tag turns red.

P {color: red ;}< p> when I was in grade 3, I was a girl <span> timid </span>. </P>

Border cannot be inherited. The following code sets the border of the p label to 1 pixel, red, and solid border line, which is useless for the span of the child element.

P {border: 1px solid red;} <p> when I was in grade 3, I was a girl <span> timid </span>. </P>

Iv. Style priority Mechanism

If different style codes are applied to a tag,Priority (weight)In the end, which results will take effect?

Weights of various selectors

Selector	Weight
Id Selector	100
Class Selector	10
Pseudo-class selector	10
Attribute Selector	10
Tag Selector	1
Pseudo object Selector	1
Inheritance	0.1
Wildcard (*)	0

 

 

 

 

 

 

If multiple selectors are used together, the weights of each selector must be added up to represent the final weights. For example:

P {color: red;}/* weight: 1 */p span {color: green;}/* weight: 1 + 1 = 2 */. warning {color: white;}/* the weight is 10 */p span. warning {color: purple;}/* the weight is 1 + 1 + 10 = 12 */# footer. note p {color: yellow;}/* with a weight of 100 + 10 + 1 = 111 */