CSS3 Complex Selector

Today the video in the CSS3 complex selector part of the reading, to tidy up the knowledge points learned.

1. Brother Selector: Same position level, can be called sibling element

A, adjacent sibling selector: Next
Tightly following the "current element" (one), specifying the element of the selector
Syntax: using "+" as a binding character
P-Elements immediately following p Eg:p+p

<!--demo.html-->
B, Universal Brother selector: Next_all
Match the sibling element of the specified selector to the "all behind" of an element
Syntax: Use "~" as a binding character
eg:p~p{}, match p after all p

2. Attribute selector: Use the attributes that are included with the element for the selector, as a condition for selecting elements
Syntax: [attribute-related content]
Eg:[id]-all elements with id attribute
P[id], p element with id attribute
A, [Id],p[id]
b, P[id][class], with both ID and class p elements
C, p[id= "P1"] p element with->id value of "P1"
D, p[class~= "value"]
E, p[class^= "B") match the Class property value with the P mark starting with B
F, p[class*= "B"]-Match the class attribute value with the P tag of B
G, p[class$= "B") match the class attribute value with the p mark ending with B

<!--demo.html--
 A, target pseudo-class: Highlight active HTML anchor 
 Syntax:: target 
 B, element state Pseudo-class: Most used on form elements 
 1,: Enabled Matches each enabled element 
 2,:d isabled, matches each disabled element 
 3,: checked, matches the selected form element (only for Checkbox,radio) 
 C, struct pseudo-class 
 1: first-child. Match belongs to the first child element in its parent element 
 2,: Last-child-match the last child element that belongs to its parent element 
 3,: Empty---matches an element that has no child elements ( Text content or spaces are also counted as child elements) 
 4,: Only-child to match a unique child element in its parent element 
 D, negative pseudo-class: matches elements of a non-specified selector 
 Syntax:: Not (selector) 

<!--demo01.html target Pseudo-class-
<!--demo02.html structure Pseudo-class-
<!--demo03.html pseudo-element status pseudo-class-
<!--demo04.html negation pseudo class--  
4, pseudo-element selector: Match out is the text content
A,: First-letter, match first character
B,: First-line, match first line
Above two selectors, inline element is invalid, inline block, block level can be
C,:: Selection for Euro-deductible user selected text style (Firefox seems incompatible)

<!--demo.html Element Selector--  
The above is all the content I learned in the video, if there are errors or deficiencies, I hope the visitors put forward, timely correct me.