Learn CSS selectors this week.
The most commonly used ones are element selectors, ID selectors, class selectors, and descendant selectors.
There are also some less commonly used but powerful selectors that are easily overlooked. This study summarizes.
1. Descendant selectors and descendant selectors
Descendant selector: element1 element 2, finds all element2 that are descendants of element1
Child selector: element1 > element 2, find element2 that is a child of element1
2. Pseudo-class selectors: first-child and: first-of-tye
first-child: element:first-child, find element that is the first child of its parent
first-of-tye: element: first-of-tye, find element, which is the first child element of this type of its parent
3. Pseudo-class selectors: last-child and: last-of-tye
the exact opposite of 2
4. Pseudo-class selectors: nth-child(n) and: nth-of-type( n )
2 upgraded version, more flexible
nth-child(n): element:nth-child(n), find element, which is the nth child element of its parent
nth-of-type( n ): element:nth-of-type( n ), find element, which is the nth child element of this type of its parent
5. Pseudo-class selectors: nth-last-child( n ) and: nth-last-of-type( n )
3 upgrade