CSS3 -- complex selector and css3 Selector

CSS3 -- complex selector and css3 Selector

Today, we have finished reading the CSS3 complex selector in the video to sort out the learned knowledge points.

1. sibling selector: a sibling element at the same position

A. Adjacent sibling selector: next
Closely following the current element (one) and specifying the element of the selector
Syntax: Use "+" as the delimiter
Eg: div + p-> p element following the div

1 <! -- Demo.html --> 2 
B. General brother selector: next_all
Matches the sibling element of an element [all following] that meets the specified selector.
Syntax: Use "~" As a delimiter
Eg: div ~ P {}-> match all p
2. Attribute selector: Use the attributes attached to an element, which is used in the selector as a condition for selecting an element.
Syntax: [Attribute-related content]
Eg: [id]-> all elements with the id attribute
P [id]-> p element with id attribute
A, [id], p [id]
B. p [id] [class]-> p elements with both id and class
C. p [id = "p1"]-> p element whose id value is "p1"
D. p [class ~ = "Value"]
E, p [class ^ = "B"]-> match the p Mark of the class Attribute Value starting with B
F, p [class * = "B"]-> match the p Mark that contains B in the class property value
G, p [class $ = "B"]-> match the p Mark of the class Attribute Value ending with B
1 <! -- Demo.html --> 2 
3. Pseudo-class selector
A. Target pseudo-category: highlight the HTML anchor of the activity
Syntax: target
B. Element state pseudo class: mostly used on form elements
1. enabled-> match each enabled Element
2.: disabled-> match each disabled Element
3.: checked-> match selected form elements (applicable only to checkbox and radio)
C. Structure pseudo class
1.: first-child-> match the first child element in its parent Element
2.: last-child-> match the last child element in its parent element.
3. empty-> match elements without child elements (text content or spaces are also counted as child elements)
4.: only-child-> match the unique child element in its parent Element
D. Negative pseudo-class: matches non-specified selector elements.
Syntax: not (selector)
1 <! -- Demo01.html target pseudo class --> 2 
1 <! -- Demo02.html structure pseudo class --> 2 
1 <! -- Demo03.html pseudo element state pseudo class --> 2 
1 <! -- Demo04.html denies pseudo classes --> 2 
4. pseudo element selector: match all text content.
A.: first-letter-> match the first character
B.: first-line-> match the first line.
The preceding two selectors, the row element is invalid, and the row block and block level can be
C.: selection-> the text style selected by European users (Firefox seems incompatible)
1 <! -- Demo.html is the element selector. --> 2 
The above is all the content I learned in the video. If there are any errors or deficiencies, I hope that the viewer can correct them in time ..
Today is the second day after I opened my blog. This is my first article. I have published my own learning notes here, hoping to record my own growth.