table color change effect
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
Now many pages are implemented using css
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
css3 interlaced color expansion reading
Structural pseudo selector
As the name suggests, the structural pseudo-class selector uses DOM to implement element filtering, that is, it matches through the relationship between document structures, thereby reducing the definition of class and peace ID in the document.
| Selector | illustrate |
| E:root | Match the root element of the document where E is located. In the html document, the root element is the html tag. |
| E:nth-last-child(n) | Select E element, and it is the nth child element of the parent element |
| E:nth-of-type(n) | Select E element, and it is the nth in the set of child elements of type E in all child elements of the parent element. n can be the number (1,2,3), the keyword (odd,even), the formula (2n,2n+3), the number starts from 1, not 0. For example, p:nth-of-type(2) matches it, the second p element in <div><h1></h1><p></p><p></p></div> |
| E:nth-last-of-type(n) | Select E element, and it is the nth child node of the parent element |
| E:last-child | Find the E element, and it is the last word node in the parent element |
| E:first-of-tpe | Find the E element, and it is the first element of the parent element of the type, such as p:first-of-type to match the first p element in <div><p></p><p></p>. |
| E:last-of-type | Find the E element, and it is the last element of the type in the parent element. For example, p:last-of-type matches, the last p element in <div><p></p><p></p></p></div> has the same meaning as E:nth-last-of-tpe(1) |
| E:only-child | Find out which child element contains only one of the parent elements, and the element is E |
| E:only-of-type | Select that its parent element contains only one child element of the same type, and the child element matches E. For example, p:only-of-type matches p in <div><p></p></div>, because div only includes one p element |
| E:empty | Match E element, and the element does not contain child nodes. Note that the text also belongs to the node. |
Browser compatibility
| IE | Firefox | Opera | Safari | Chrome |
| IE9 and above | 3.5 and above | 9.6 and above | 3.1 and above | 1.0 and above |
The above is the detailed content of the table color change effect to make the table structure clearer. For more information about interlacing color change modification tables, please pay attention to my other related articles!