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

[*] 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