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

我们可以在VS里面提前预览一下。

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

一  :nth-child 伪选择器

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

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         ul li:nth-child(1) {

             color: red;

         }

     </style>

 </head>

 <body>

     <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

         <li>6</li>

     </ul>

 </body>

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

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

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         ul li:first-child {

             color: red;

             font-weight:800;

         }

         ul li:last-child {

             color: blue;

             font-weight: 800;

         }

     </style>

 </head>

 <body>

     <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

         <li>6</li>

     </ul>

 </body>

 </html>

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

　同样在jquery中，有一组选择器叫做“表单对象属性“，我们可以看看jquery的在线文档。

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

1. disabled,enabled

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         input[type='text']:enabled {

             border: 1px solid red;

         }

             input[type='text']:disabled {

                 border: 1px solid blue;

             }

     </style>

 </head>

 <body>

     <form>

         <input type="text" disabled="disabled" />

         <input type="text"/>

     </form>

 </body>

 </html>

2.  checked,unchecked

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         form input[type="radio"]:first-child:checked {

             margin-left: 205px;

         }

     </style>

 </head>

 <body>

     <form>

         <input class="test" type="radio" value="女" /><span>女</span><br/>

         <input class="test" type="radio" value="男" /><span>男</span>

     </form>

 </body>

 </html>

3. selected

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         option:checked {

             color: red;

         }

     </style>

 </head>

 <body>

     <form>

         <select>

             <option>1</option>

             <option>2</option>

             <option>3</option>

         </select>

     </form>

 </body>

 </html>

三  empty伪选择器

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

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         p:first-child{

             width:500px;

             height:20px;

         }

         p:empty {

             background:red;

         }

     </style>

 </head>

 <body>

     <p></p>

     <p>他好</p>

 </body>

 </html>

四：not(xxx) 伪选择器

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

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

CSS之旅——第三站 强大的伪选择器的更多相关文章

  1. asp.net mvc 之旅—— 第三站 路由模板中强大的自定义IRouteConstraint约束

    我们在写mvc的时候,经常会配置各种url模板,比如controller,action,id 组合模式,其实呢,我们还可以对这三个参数进行单独的配置,采用的方式自然 就是MapRoute中的const ...

  2. Sql Server之旅——第三站 解惑那些背了多年聚集索引的人

    说到聚集索引,我想每个码农都明白,但是也有很多像我这样的猥程序员,只能用死记硬背来解决这个问题,什么表中只能建一个聚集索引, 然后又扯到了目录查找来帮助读者记忆....问题就在这里,我们不是学文科,, ...

  3. Javascript之旅——第三站：几个需要注意的运算符

    平时写惯了C#,所以会觉得什么样的运算符就应该做什么样的运算,但是有一天你的习惯被其他语言颠覆了,不知道是不是有一股强大的好奇 心,刚好在js中,我的这种习惯就被颠覆了,下面就看看哪些运算符颠覆了我的 ...

  4. CSS之旅——第二站 如何更深入的理解各种选择器

    上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...

  5. webpack入坑之旅（三）webpack.config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  6. Sql Server之旅——第五站 确实不得不说的DBCC命令

    原文:Sql Server之旅--第五站 确实不得不说的DBCC命令 今天研发中心办年会,晚上就是各自部门聚餐了,我个人喜欢喝干红,在干红中你可以体味到那种酸甜苦辣...人生何尝不是这样呢???正好 ...

  7. JAVA之旅（三十四）——自定义服务端，URLConnection，正则表达式特点，匹配，切割，替换，获取，网页爬虫

    JAVA之旅(三十四)--自定义服务端,URLConnection,正则表达式特点,匹配,切割,替换,获取,网页爬虫 我们接着来说网络编程,TCP 一.自定义服务端 我们直接写一个服务端,让本机去连接 ...

  8. WCF学习之旅—第三个示例之四（三十）

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  9. WCF学习之旅—第三个示例之二（二十八）

    上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1)  使用NuGet下载最新版的Entity Fram ...

随机推荐

  1. 获取Android版本信息和电话信息

    Android的版本信息可以通过android.os.Build获得,电话信息可以通过TelephonyManager获得,代码如下:     private void get_infor(){ sd ...

  2. [修复] Firemonkey 使用 DrawPath 断线问题（Android & iOS 平台）

    问题:使用 Canvas.DrawPath 绘制时,最后一点无法画到终点位置.(这个问题要在粗线才能察觉) 适用:Delphi 10 Seattle (或更早的版本) for Android & ...

  3. final static 深度解析

    function test(){ var a = b = 10; } test( ); alert(b); 由上一篇博客说起,最后输出的是10.引起歧义的原因是全局变量和局部变量的关系.顺着这个话题, ...

  4. MOSOS基础（转自树人云）

      发现 话题 · · · 登录 注册 MesosDocker 回顾Java 发展,看 Docker 与Mesos 演讲嘉宾数人云COO 谢乐冰在德国工作十年,回国后加入惠普电信运营商部门,拥有多年项 ...

  5. MyBatis入门（一）

    一.MyBaris简介 1)MyBaris发展过程 MyBatis的前身叫iBatis,本是apache的一个开源项目, 2010年这个项目由apache software foundation 迁移 ...

  6. 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  7. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  8. Shepherd – 在应用程序中轻松实现引导功能

    Shepherd 是一个指导用户使用应用程序的 JavaScript 库.它使用 Tether——另一个开源库,实现所有的步骤.Tether 确保你的步骤不会溢出屏幕或被剪裁.你可以很容易地指导用户使 ...

  9. 一行代码如何控制ipunt框里面值的长度

    <input  type="text"  id="你的id" maxlength="你想要的长度" onkeyup="thi ...

  10. JSOM 对User的操作

    一.操作当前用户 //Load current user info function LoadCurUser() { var curUser; curUser = curWeb.get_current ...