Home  >  Article  >  Web Front-end  >  Overview of new selectors in CSS3

Overview of new selectors in CSS3

高洛峰
高洛峰Original
2017-02-15 13:09:071506browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn