说到伪选择器，真的让我体会到了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. 提高生产性工具 - Model代码生成器（NET / JAVA） （一）

    原来在上一家公司,整整一年都在做工具,提高生产性,那个项目特别巨大,所以总共为老东家节约了500K左右的美金. (除了表扬之外,我个人什么好处都没有,领导们都升官发财了,郁闷) 到了新公司,也准备开发 ...

  2. 数据库SQL server规则的创建、查看、修改和规则的绑定与松绑、删除

    用CREATE RULE语句创建规则 创建雇佣日期规则 hire_date_rule CREATE RULE hire_date_rule AS @hire_date>='1980-01-01' ...

  3. Node.js的UnitTest单元测试

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } 在专业化的软件开发过程中,无论什么平台语言,现在都需要UnitTes ...

  4. Java的对象初始化过程

    成员变量(字段)初始化顺序 在一个类里初始化的顺序是由成员变量在类里面的定义的顺序来决定的.即使成员变量大量散布于类的各个方法定义的中间,那些成员变量仍会在调用任何方法之前得以初始化,甚至在构造函数调 ...

  5. Android ant自动打包脚本：自动替换友盟渠道、版本号、包名

    本文最后修改时间:2014-3-10 Android项目开发时,给公司人员安装,频繁升级,版本号总需要改,太麻烦,跟着时间变,自动升级才方便. Android项目开发新版时,手机上可能要装两个版本,一 ...

  6. 决战大数据之二：CentOS 7 最新JDK 8安装

    决战大数据之二:CentOS 7 最新JDK 8安装 [TOC] 修改hostname # hostnamectl set-hostname node1 --static # reboot now 重 ...

  7. NProgress.js template

    NProgress.js:加载进度条:http://ricostacruz.com/nprogress/ 基础的这几个方法 这个网站上都有 我在一个地方看到这个代码 NProgress.configu ...

  8. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  9. Web Uploader - 功能齐全，完美兼容 IE 的上传组件

    文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML ...

  10. MySQL支持的数据类型

    1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节 范围(-128~127) smallint(m) 2个字节 范围(-32768~32767) mediumint(m) 3 ...