Id &&class element selector

【 Three features of CSS 】

Cascade:

z-indexThe hierarchy can be adjusted after positioning is enabledCopy the code

Priority:

! Important > inline > id > class[Attribute pseudo-class]> tag[False element]> * inheritanceCopy the code

Priority weights

! Important inline (code controls are also inline) ID class[Attribute pseudo-class]The label[False element]* Inheritance weight10000      1000                         100        10              1        0   
Copy the code

Note:Weight valueCan beaddIf theAdd weight valuesThe same withWhatever follows shall prevail

Add weight valuesisNo more thanThe weightThe largest order of magnitude

Inheritance:

The default font size is16px
Copy the code

F: 1000

< p style= "max-width: 100%; clear: both; min-height: 1em;Copy the code

Selector F: 100 (the ID attribute is unique in a document)

The ID selector uses the ID attribute of an HTML element to select a particular element.

The id of the element is unique on the page, so the ID selector is used to select a unique element!

To select an element with a specific ID, write a pound sign (#) followed by the id of the element.

    #id{}
Copy the code

Usage: Select the tag with the ID name

Note:Id nameNot toBegin with.

[class] selector F: 10

The class selector selects an HTML element with a specific class attribute.

To select an element that has a specific class, write a period (.) Character, followed by the class name.

You can also specify that only certain HTML elements are affected by the class.

HTML elements can also reference multiple classes.

. The name of the class {}Copy the code

Usage: Select the tag with the class name

Note: Class names cannot start with a number!

Pseudo-class: special state of an element [:] F: 10

Usage: The effect of the pseudo-class selector can be achieved by adding an actual class,

Element: pseudo-class stateCopy the code

【hover】 to hover

The element:hover{}
Copy the code

【focus】 get the focus (input)

    input: focus {}Copy the code

After the visit

    a:visited{}
Copy the code

【empty】 Select the element whose content is empty

    div:empty{}
Copy the code

【disabled】 Disable (input)

    input:disabled{}
Copy the code

Label selector F: 1(element selector)

The element selector selects HTML elements based on their name.

Tag name {}Copy the code

Usage: Select all tags with an HTML name

Pseudo-element: special position of element [::] F: 1

Element tag: : Pseudo element locationCopy the code

Usage: The effect of the pseudo-element selector is achieved by adding an actual element.

【before】 in the past. I’m going to add the pseudo-element

The element::before{content: ""};Copy the code

【 典 型 范 例 2 】 In the middle of And then we add the pseudo-element

The element::after{content: ""};Copy the code

【 First-line 】 first line (p)

    p::first-line{}
Copy the code

【first-letter】 the first letter (P)

    p::first-letter{}
Copy the code

【placeholder】input hint content

    input::placeholder{}
Copy the code

Pseudo-elements and pseudo-classes in CSS

The selector	The sample	example
:checked	input:checked	Select all selected form elements
:disabled	input:disabled	Select all disabled form elements
:empty	p:empty	Select all p elements that have no children
:enabled	input:enabled	Select all enabled form elements
:first-of-type	p:first-of-type	Each selected p element is the first p element of its parent element
:in-range	input:in-range	Selects values within the range specified by the element
:invalid	input:invalid	Select all invalid elements
:last-child	p:last-child	Selects the last child of all p elements
:last-of-type	p:last-of-type	Select that each p element is the last p element of its parent element
:not(selector)	:not(p)	Select all elements other than p
:nth-child(n)	p:nth-child(2)	Select the second child of the parent element of all p elements
:nth-last-child(n)	p:nth-last-child(2)	Select the second-to-last child of all p elements
:nth-last-of-type(n)	p:nth-last-of-type(2)	Select the second-to-last child of all p elements that is P
:nth-of-type(n)	p:nth-of-type(2)	Select the second child of all p elements that is P
:only-of-type	p:only-of-type	Select all elements that have only one child p
:only-child	p:only-child	Select all p elements that have only one child
:optional	input:optional	Select the element attribute that does not have “required”
:out-of-range	input:out-of-range	Selects element attributes for values outside the specified range
:read-only	input:read-only	Select the element attribute of the read-only attribute
:read-write	input:read-write	Select element attributes that do not have read-only attributes
:required	input:required	Select the element attribute specified by the “required” attribute
:root	root	Select the root element of the document
:target	#news:target	Select the current active #news element (click on the name of the anchor contained in the URL)
:valid	input:valid	Select properties for all valid values
:link	a:link	Select all unvisited links
:visited	a:visited	Select all visited links
:active	a:active	Select active links
:hover	a:hover	The state of placing the mouse over the link
:focus	input:focus	The selection element has focus after input
:first-letter	p:first-letter	Select each<p>First letter of the element
:first-line	p:first-line	Select each<p>The first row of the element
:first-child	p:first-child	The selector matches those belonging to the first child of any element<p>The element
:before	p:before	At the end of each<p>Element before inserting content
:after	p:after	At the end of each<p>Insert content after the element
:lang(language)	p:lang(it)	for<p>The lang attribute of the element selects a starting value

[*] Universal selector (wildcard) F: 0

The general selector (*) selects all HTML elements on the page.

Other selectors (descendants, descendants, brothers, parallel selectors)

Descendant selector

     .class .class
Copy the code

Requirement: Select the elements that match the conditions inside all elements

【 Descendant selector >】

    .class(Parent element)>.class(Child element)Copy the code

Requirements: Must be child elements (the selector matches from right to left)

Sibling element selector +

    .class(brothers1) +.class(brothers2)Copy the code

Requirement: There can be no other elements between elements

【 Brother selector ~】

     .class(brothers1) ~.class(brothers2)Copy the code

Requirement: There can be other elements in the middle

[parallel selector,]

    .class , .class
Copy the code