1. Root selector: root
:root{} is equivalent to html{}. Generally speaking, it is recommended to use: root{}.
:root选择器的演示
2. Negative selector: not
Negative selector, that is, other than that
3. Empty selector:empty
Note: :empty only takes effect on elements with no content at all, even if there is a space.
我这里有内容
4. Target selector: target
hyperlink address, corresponding to the id
5. The first one with The last child element: first-child :last-child
6. Specify the child element selector/odd-even selector:nth-child( n) :nth-last-child(n)
7. The first and last matching type of child elements first-of-type last-of-type
我是一个块元素,我是.wrapper的第一个子元素
我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素
我是一个段落元素
我是一个块元素
8. Specify matching type sub-element selector/matching type parity selector:nth-of-type(n) :nth-last-of-type(n )
我是一个p元素
我是一个段落元素
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
我是一个p元素
我是一个段落
9. The only child element selector only-child
matches the element’s parent element only There is one child element, and it is a unique child element
我是一个段落
我是一个段落
我是一个段落
10. The only matching child element of type only-of-type
我是一个段落
我是一个段落
我是一个段落
我是一个p元素
我是一个p
我是一个段落
11. Available selectors:enabled
12. Unavailable selector: disabled
13. Selected selector: checked
14. Selected by mouse, highlight selector::selection
拿鼠标选中我, 试试看!
15. Read-only selector: read-only
16. Non-read-only selector: read-write
The above is the detailed content of Share common selector usage examples in CSS3. For more information, please follow other related articles on the PHP Chinese website!