Introduction to new CSS selectors and pseudo-classes in HTML5_html5 tutorial skills

Selector
p[name^="my"]{font-size:14px}
Selector^= applies the rule to all

element tags
whose name attribute starts with "my" p[name$="my"]{font-size:14px}
Selector$= applies the rule to all

element tags whose name attribute ends with "my"
p[name*= "my"]{font-size:14px}
Selector$= applies the rule to all

elements whose name attribute contains "my" at the end
Selector> , ,~
Selector > indicates that the affected element is a child of the first element.
Selector This selector refers to the element immediately following the element. The two elements must have the same parent.
Selector~ is similar to , but the affected element does not necessarily follow the first element.

Add ":" between the name of the pseudo-class and the referenced element
Example: myclass:nth-child(2)
The second element in the myclass element
Keyword "odd " , "even"
myclass:nth-child(odd): affects the
whose parent element index position is odd number
myclass:nth-child(even): affects the
whose parent element index position is even number

Copy code

The code is as follows:

1

2

1

2

1

2

Effect As follows:
1
2
1
2
1
2
Negative pseudo-class
:not(p){color:red} except< All elements other than the ;p> element are red