说到伪选择器，真的让我体会到了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. JSONObject和JSONArray的关系

    JSON字符串的最上一层,肯定是一个JSONObject,JSONObject的下一层,可以包含JSONArray,JSONArray又包含了若干个JSONObject.用例子来说明: package ...

  2. eclipse新建maven项目（2）

    本篇博文是继续之前的博文eclipse新建maven项目(1),那篇博文不在随笔在文章中.首先按照之前那篇博文进行创建maven项目操作,一系列操作下来之后发现刷新项目后会报错: 别急哈,可以解决. ...

  3. 使用Spring的@Scheduled实现定时任务

    Spring配置文件xmlns加入xmlns:task="http://www.springframework.org/schema/task"xsi:schemaLocation ...

  4. 【FFmpeg】Windows下FFmpeg调试

    为了深入了解ffmpeg的工作原理,需要阅读源代码,调试源代码.在Windows下调试ffmpeg源码,一种方法是在MinGW+Msys环境下,利用GDB进行调试:另一种是借助Eclipse进调试,其 ...

  5. LR--Controller的Pacing设置（不容忽视的设置）

    运行时的Pacing设置主要影响什么?     Pacing主要用来设置重复迭代脚本的间隔时间.共有三种方法: A:上次迭代结束后立刻开始. B:上次迭代结束后等待固定时间. C:按固定或随机的时间间 ...

  6. Java新集合示意图

    Java的新集合实际上只有3个集合组件:①Map ②List ③Set 在Java 1.2后应该尽量避免使用Hashtable,Vector 和Stack: 假如在一个列表中部进行大量的插入和删除操作 ...

  7. Java新集合

    对我来说,集合类属于最强大的一种工具,特别适合在原创编程中使用.大家可能已感觉到我对Java 1.1 提供的集合多少有点儿失望.因此,看到Java 1.2 对集合重新引起了正确的注意后,确实令人非常愉 ...

  8. Use a cache

    To create high-performance systems, sometimes you need to cache data. Play has a cache library and w ...

  9. loading插件（原创）

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...

  10. JavaScript滚动条插件源码

    这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表 ...