1. 结构伪类选择器:

    <div>
    <ul> /*ul:only-of-type*/
    <li>one</li> /*li:first-child li:nth-child(2n+1)*/
    <li>two</li> /*li:nth-child(2)*/
    <li>three</li> /*li:last-child li:nth-child(2n+1)*/
    </ul>
    <div>adc</div> /*div div:first-of-type*/
    <p>para</p>
    <div>def</div> /*div div:last-of-type*/
    <p>para</p> /*p:nth-of-type(2)*/
    <b>ghi<b>
    </div>

      1.E:first-child :作为父元素的第一个子元素的元素E。与E:nth-child(1)等同。
          2.E:last-child :作为父元素的最后一个子元素的元素E.与E:nth-last-child(1)等同。
          3.E:root :选择匹配元素E所在文档的根元素。
          4.E F:nth-child(an+b) ,n取任意正整数与0。选择父元素E的第an+b+1个子元素F。即所选中的元素前有an+b个F类型的兄弟节点。
          5.E F:nth-last-child(),类似上方。从后数。
          6:E:nth-of-type(n),选择父元素内具有指定类型的第n个E元素。
          7:E:nth-last-of-type(n),选择父元素内具有指定类型的倒数第n个E元素。
          8:E:last-of-type
          9:E:first-of-type
          10:E:only-child,父元素只包含一个子元素,且子元素匹配E。
          11:E:only-of-type,选择父元素只包含一个同类型的子元素,且该子元素匹配E
          12:E:empty:选择没有子元素的元素,且不包含文本节点。

  2. 否定伪类选择器:
    E:not(F),匹配所有除F外的E元素。
  3. 属性选择器:
    1.E[attr] :选择匹配具有attr属性的E元素
    2.E[attr=val] :选择匹配具有attr属性的E元素,且属性值为val(val区分大小写)。
    3.E[attr|=val] :选择匹配具有attr属性的E元素,且属性值为val或以val开头。
    4.E[attr~=val] :选择匹配具有attr属性的E元素,attr属性值具有多个空格分隔的值,且其中一个属性值为val。
    5.E[attr*=val] :选择匹配具有attr属性的E元素,且属性值任意位置包含了val。
    6.E[attr^=val] :选择匹配具有attr属性的E元素,且属性值以了val开头。
    7.E[attr^=val] :选择匹配具有attr属性的E元素,且属性值以了val结尾。

css伪类选择器详细解析及案例使用-----伪类选择器(2)的更多相关文章

  1. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  2. css伪类选择器详细解析及案例使用-----伪元素

    伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于I ...

  3. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  4. CSS选择器详细总结

    一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...

  5. java类生命周期详细解析

    (一)详解java类的生命周期 引言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前 ...

  6. Argo workflow 案例练习和配置详细解析

    参数化 - parameters hello-world-parameters.yaml文件解析 apiVersion: argoproj.io/v1alpha1 kind: Workflow met ...

  7. Thrift之TProcess类体系原理及源码详细解析

    我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...

  8. thrift之TTransport类体系原理及源码详细解析1-类结构和抽象基类

    本章主要介绍Thrift的传输层功能的实现,传输的方式多种多样,可以采用压缩.分帧等,而这些功能的实现都是相互独立,和上一章介绍的协议类实现方式比较雷同,还是先看看这部分的类关系图,如下: 由上面的类 ...

  9. Python之元类详细解析

    一.补充内置函数isinstance和issubclass 1.isinstance是判断一个对象是不是由一个对象产生的 class Foo: pass obj=Foo() print(isinsta ...

随机推荐

  1. JavaScript 类、构造函数、原型

    类.构造函数.原型  :本质均为函数 利用的原理是:词法作用域,调用对象及作用域链  闭包  属性查找方式    设计和new运算符一起使用的函数叫做构造函数. 构造函数的工作:初始化一个新创建的对象 ...

  2. 武汉科技大学ACM :1005: 一二三

    Problem Description 你弟弟刚刚学会写英语的一(one).二(two)和三(three).他在纸上写了好些一二三,可惜有些字母写错了.已知每个单词最多有一个字母写错了(单词长度肯定不 ...

  3. Menu学习

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/Unity_Menu.html using UnityEditor; using U ...

  4. C++ Const成员函数

    一些成员函数改变对象,一些成员函数不改变对象. 例如:  int Point::GetY() { return yVal; }  这个函数被调用时,不改变Point对象,而下面的函数改变Point对象 ...

  5. epoll模型的et模式和lt模式

    http://www.cppblog.com/peakflys/archive/2012/08/26/188344.html    评论区讨论,唐诗! http://www.cnblogs.com/e ...

  6. Delphi 串口打印机打印

    一.硬件准备 打印机: 打印机必须具有串口,没有标配串口的打印机,必须购买串口卡,串口卡的型号请参考随机<操作手册>. 计算机: 计算机必须具有串口,计算机通常具有两个串口:COM1和CO ...

  7. JQUERY1.9学习笔记 之基本过滤器(四) 首元素选择器

    首元素选择器:jQuery( ":first" ) <!DOCTYPE html><html lang="zh-cn"><head ...

  8. 活动倒计时代码(精确到毫秒)jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. toast组件较为完美版本

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  10. myEclipse8.* 手动安装ADT插件[转]

    Myeclipse8.6手动添加插件: 自动在线安装完ADT插件会导致myeclipse8.6中无法创建web项目以及其他项.解决方法是手动安装步骤如下: 首先安装好 MyEclipse 8.6. 1 ...