说到伪选择器，真的让我体会到了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. 如何显示二进制流的图片（利用img控件）

    之前在http://www.cnblogs.com/JsonZhangAA/p/5568575.html博文中是利用的image控件来显示的二进制流图片,我现在想的是能 通过普通的<img id ...

  2. MySQL中select * for update锁表的范围

    MySQL中select * for update锁表的问题 由于InnoDB预设是Row-Level Lock,所以只有「明确」的指定主键,MySQL才会执行Row lock (只锁住被选取的资料例 ...

  3. Hello, Android多屏幕版

    Hello, Android Multiscreen Xamarin.Android 中处理导航 在这两部指南中,我们将扩展我们前面创建的Phoneword 应用,以处理第二个屏幕.本章主要介绍安卓的 ...

  4. MySQL 语句大全--------添加列，修改列，删除列

    ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:alter table ...

  5. Delphi QC 记录

    各网友提交的 QC: 官方网址 说明 备注 https://quality.embarcadero.com/browse/RSP-12985 iOS device cannot use indy id ...

  6. SOA （面向服务的体系结构）

    面向服务的体系结构是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台.操作系统和编程语言 ...

  7. 【算法和数据结构】_11_小算法_itoa、ftoa及字符串倒置

    [1]main.c /**************************************************** * * 把整数按照进制数转换为相应进制的字符串 *(要考虑符号),比如 ...

  8. Servlet与多线程与IO操作

    1.JVM内存模型相关概念 2.Java多线程并发深入理解 3.Servlet.设计模式.SpringMVC深入理解 4.Java基础遗漏点补充 数据库连接池:JDBC connection pool ...

  9. [转载]jQuery诞生记-原理与机制

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3520 一.看似偶然的 ...

  10. MySQL之MySQL5.7安装包(msi文件)在Windows8下安装

    最近自己在使用MySQL5.7.16.msi安装MySQL.自己下载的是.msi文件,在安装的过程中遇到了许多文件,网上大部分的Blog都是关于免安装包的安装方法,希望我的方法对大家有帮助. 1,下载 ...