Share common selector usage examples in CSS3

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

 
test
 
 这是一个测试 
  
pipi
 
 content for pipi 
 
ruby
 
 content for ruby 
 
Brand
 
 content for aaron 

5. The first one with The last child element: first-child :last-child

 
 
Link1
 
Link2
 
Link3
 
Link4
 
Link5
 

6. Specify the child element selector/odd-even selector:nth-child( n) :nth-last-child(n)

 
 
item1
 
item2
 
item3
 
item4
 
item5
 
item6
 
item7
 
item8
 
item9
 
item10
 

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

 
 
 Text Input:  
 
 Text Input:  
 

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!