网站建设资讯

NEWS

网站建设资讯

CSS中的伪选择器详细介绍-创新互联

本篇内容主要讲解“CSS中的伪选择器详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中的伪选择器详细介绍”吧!

专业从事企业网站建设和网站设计服务,包括网站建设、域名注册雅安服务器托管、企业邮箱、微信公众号开发、微信支付宝成都微信小程序app软件开发公司、软件开发、等服务。公司始终通过不懈的努力和以更高的目标来要求自己,在不断完善自身管理模式和提高技术研发能力的同时,大力倡导推行新经济品牌战略,促进互联网事业的发展。

说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼。。。首先

我们可以在VS里面提前预览一下。
CSS中的伪选择器详细介绍

可以看到,上面的伪类有很多很多,多的让我眼都快瞎了。。。下面就挑一些实用性比较强的说一说。

一  :nth-child 伪选择器

     我们知道在jquery中有一种选择器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,这回在CSS中同样

可以办到,可以说一定程度上缓解了jquery的压力,下面简单举个例子。



代码如下:


   

   


   


           
  • 1

  •        
  • 2

  •        
  • 3

  •        
  • 4

  •        
  • 5

  •        
  • 6

  •    

   

CSS中的伪选择器详细介绍

可以看到,当我灌的是:nth-child(1)的时候,ul的第一个li的color已经变成red了,如果复杂一点的话,可以将1改成n,浏览器在解析css的伪类

选择器的时候,内部应该会调用相应的方法来解析到对应dom的节点,首先要明白n是从0,步长为1的递增,这个和jquery的nth-child类似,没

什么好说的,然后我们尝试下:first-child 和 last-child。



代码如下:



   
   

   


   


           
  • 1

  •        
  • 2

  •        
  • 3

  •        
  • 4

  •        
  • 5

  •        
  • 6

  •    


   
CSS中的伪选择器详细介绍

二 :checked,:unchecked,:disabled,:enabled

同样在jquery中,有一组选择器叫做“表单对象属性“,我们可以看看jquery的在线文档。
CSS中的伪选择器详细介绍

同样我们很开心的发现,在css中也存在这些属性。。。是不是开始有点醉了。。。还是先睹为快。

1. disabled,enabled



代码如下:




   
   

   



   


       
       
   


   
CSS中的伪选择器详细介绍

2.  checked,unchecked



代码如下:




   
   

   



   


       

       

   




CSS中的伪选择器详细介绍

3. selected

   这个在css中虽然没有原装的,但是可以用option:checked来替代,比如下面这样。



代码如下:




   
   

   



   


       
   



CSS中的伪选择器详细介绍

三  empty伪选择器

    这个选择器有点意思,在jquery中叫做”内容选择器“,就是用来寻找空元素的,如果玩转jquery的empty,这个也没有什么问题,

下面举个例子,让第一个空p的背景变色。



代码如下:




   
   

   



   


   

他好




CSS中的伪选择器详细介绍

四:not(xxx) 伪选择器

同样这个也是非常经典的not选择器,在jquery中叫做”基本选择器“,想起来了没有???

CSS中的伪选择器详细介绍
总的来说,当你看完上面这些,是不是觉得css3中已经融入了一些”脚本处理行为”,这种感觉就是那个css再也不是你曾今认识的那个css了。


到此,相信大家对“CSS中的伪选择器详细介绍”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文标题:CSS中的伪选择器详细介绍-创新互联
URL网址:http://cdweb.net/article/eppph.html