Home > Article > Web Front-end > Overview of new selectors in CSS3
selector :first-child This is the descendant selector. Weird, please avoid rather than understand.
selector:first-child
当前 selector 选中的元素集合中的第一个元素
selector:last-child
当前 selector 选中的元素集合中的最后一个元素.
But there is a problem, :last-child does not take effect.
should be:
1 The parent element parent of the current selector
2 All child elements of parent, [a,b,c]
3 The first element of the collection of child elements, if it is a selector
4 sets the style, it will take effect.
**if(selecor.parent.childElementList.firstElement === selector){ 生效 }**
So use these two pseudo-classes and add a parent element to it. It can be considered It is the first implementation.
nth-child() also applies to the above rules.
Note that n here has a lot of room for development. Odd/even can be implemented. Which ones to choose? From Which ones should be selected first.
nth-last-child() Select backwards
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:root
Select the root element of the document. It is html
:empty
Select the element that does not even have a space in the element
:not
Negative selector
:only-child
It will only take effect when the collection has only one element.
::selection
Only two attributes can be set: background, color .
selector :first-child This is the descendant selector. Weird, pay attention to avoid rather than understand.
selector:first-child
当前 selector 选中的元素集合中的第一个元素
selector:last-child
当前 selector 选中的元素集合中的最后一个元素.
But there is a problem, :last-child does not take effect.
should be:
1 The parent element of the current selector parent
2 parent All child elements, [a,b,c]
3 is the first element of the collection of child elements. If it is selector
4 to set the style, it will take effect.
**if(selecor.parent.childElementList.firstElement === selector){ 生效 }**
So use these two pseudo Class, add a parent element to it. It can be considered as the first implementation.
nth-child() also applies to the above rules.
Note that n here has a lot of room for development. , can realize odd/even, which ones to choose, and which ones to start from.
nth-last-child() Select backwards
:first-of-type
:last- of-type
:nth-of-type
:nth-last-of-type
:root
Select the root element of the document. That is html
:empty
Select the middle element Elements with no spaces
:not
Negative selector
:only-child
will only take effect when the collection has only one element.
::selection
Only two attributes can be set: background, color.
For more CSS3 new selector overview, please pay attention to the PHP Chinese website for related articles!