CSS article: About selectors

1: Multiple selectors

　　H1, H2 {} --h1 or H2 all elements of the tag

2: Wildcard Selector

　　* {} --all elements

3: Element Selector

　　div {} --all DIV elements

4: Class Selector

The. Test {} --class property is all elements of test

P.test {} --class property is all p elements of test

The. Test.test1 {} --class property has all elements of test, test1 two values, and contains more than three values with test and test1 matching

5:id Selector

Element #test {} --id property is Test

6: Property Selector

*[title] {} --all elements with the title attribute

P[class] {} --all P elements with the class attribute

A[href][title] {} --all the A elements with both an href and a title attribute

A[href= "DDD"] --a element with all href attribute values "ddd/"

a[href= "DD"][title= "DD"] --all a elements with the href attribute value "dd" and the title "DD "

P[class~= "Test4"] {} --class property value contains all p elements of test4, corresponding to a type such as class= "Test Test4" will be included

P[class^= "Test4"] {} --class property value all p elements beginning with test4

P[class$= "Test4"] {} --class property value to test4 all p elements ending

P[class*= "test444"] {} --class attribute value contains all p elements of the string test4, corresponding to the class= "Test44"] type will be included

　　

7: Descendant Selector

　 Div span{} all span elements under the--DIV element, that is, the div can be a span of the fathers, grandparents, etc.

all span child elements under div > span {}--div element, that is, span can only be a child of a div　　

div + span{} --all span elements of the DIV neighbor sibling, that is, Div has the same ancestor as span, and div is in front

8: Pseudo-Class Selector

a:link{} --a element that has not been accessed

a:visited{} --a element that has been visited

9: Dynamic Pseudo-class

　 element: focus{} --refers to an element that currently has input focus, that is, an element that is activated by receiving keyboard input .

element: hover{} --refers to the element that the mouse rests on

element: active{} --the element style that refers to mouse-activated elements, such as clicking a link or a button at that moment

p:first-child{} --refers to the first P element, not the first child element of P

lang () {} --the language in parentheses refers to a language under which a style

10: Pseudo Element Selector

p:first-letter{} --refers to the first letter in a P element segment

p:first-line{} --refers to the first line within the P element segment

p:before{} --refers to the style set before the P element, where you can add content and the corresponding style

p:after{} --refers to the style set after the P element, where you can add content and the corresponding style

Pseudo-elements can only be used for block-level elements of markup or paragraph classes, not for inline elements, and pseudo-elements must be placed after the subject of a selection

CSS article: About selectors