• 首页
• IT资讯
• 爱搞机
• 墨香
• 笔电
• 手机
• 剁手
• 系统
• 网页制作

1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

 i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

5. 第一个与最后一个子元素 :first-child :last-child

1.   
2.   
   •   
   • "##">Link1
     
   •   
   • "##">Link2
     
   •   
   • "##">Link3
     
   •   
   • "##">Link4
     
   •   
   • "##">Link5
     
     

6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)

1.   
2.   
   •     
   • item1
     
   •     
   • item2
     
   •     
   • item3
     
   •     
   • item4
     
   •     
   • item5
     
   •     
   • item6
     
   •     
   • item7
     
   •     
   • item8
     
   •     
   • item9
     
   •     
   • item10
     
     

7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type

1.   
2.   
3. "wrapper">   
4.     
   我是一个块元素，我是.wrapper的第一个子元素
     
5.     

   我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素

     
6.     

   我是一个段落元素

     
7.     
   我是一个块元素
     
8.   

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

1.   
2.   
3. "wrapper">   
4.     
   我是一个Div元素
     
5.     

   我是一个段落元素

     
6.   
7.     
   我是一个Div元素
     
8.     

   我是一个段落

     
9.   
10.     
    我是一个Div元素
      
11.     

    我是一个段落

      
12.   
13.     
    我是一个Div元素
      
14.     

    我是一个段落

      
15.   
16.     
    我是一个Div元素
      
17.     

    我是一个段落

      
18.   
19.     
    我是一个Div元素
      
20.     

    我是一个段落

      
21.   
22.     
    我是一个Div元素
      
23.     

    我是一个段落

      
24.   
25.     
    我是一个Div元素
      
26.     

    我是一个段落

      
27.   

9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

1.   
2.   
3. "post">   
4.     

   我是一个段落

     
5.     

   我是一个段落

     
6.   
7. "post">   
8.     

   我是一个段落

     
9.   

10. 唯一匹配类型的子元素 only-of-type

1.   
2.   
3. "wrapper">   
4.     

   我是一个段落

     
5.     

   我是一个段落

     
6.     

   我是一个段落

     
7.     
   我是一个Div元素
     
8.   
9. "wrapper">   
10.     
    我是一个Div
      
11.     
      
    •         
    • 我是一个列表项
      
    •     
      
12.     

    我是一个段落

      
13.   

11. 可用选择器 :enabled

1.   
2.   
3. "#">   
4.     
     
5.         "name">Text Input:   
6.         "text" name="name" id="name" placeholder="可用输入框"  />   
7.        
8.     
     
9.         "name">Text Input:   
10.         "text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />   
11.        
12.   

12. 不可用选择器 :disabled

1.   
2. "#">   
3.     
     
4.         "text" name="name" id="name" placeholder="我是可用输入框" />   
5.        
6.     
     
7.         "text" name="name" id="name" placeholder="我是不可用输入框" disabled />   
8.        
9.   

13. 被选中选择器 :checked

1.   
2.   
3. "#">   
4.     "wrapper">   
5.         "box">   
6.           "checkbox" checked="checked" id="usename" />√   
7.            
8.         "usename">我是选中状态   
9.        
10.   
11.     "wrapper">   
12.         "box">   
13.           "checkbox"  id="usepwd" />√   
14.            
15.         "usepwd">我是未选中状态   
16.        
17.   

14. 被鼠标选中, 高亮选择器 ::selection

1.   

2. 拿鼠标选中我, 试试看!

     

15. 只读选择器 :read-only

1.   
2.   
3. "#">   
4.     
     
5.         "name">姓名:   
6.         "text" name="name" id="name" placeholder="大漠" />   
7.        
8.     
     
9.         "address">地址:   
10.         "text" name="address" id="address" value="中国上海" readonly />   
11.        
12.   

16. 非只读选择器 :read-write

1.   
2.   
3. "#">   
4.     
     
5.         "name">姓名:   
6.         "text" name="name" id="name" placeholder="大漠" />   
7.        
8.     
     
9.         "address">地址:   
10.         "text" name="address" id="address" placeholder="中国上海" readonly="readonly" />   
11.        
12.   

留言与评论（共有 0 条评论）

验证码：

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

桂ICP备2023010378号-4

桂公网备 45012202000125号

联系我们

商业合作

广告投放

投稿须知

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持