--------------------css3选择器-------------------------
css3属性选择器  ~~属性选择器基本上ie7+都支持，可以相对放心的使用 见: www.caniuse.com
[attr]
[attr=value]
[attr*=value] //css3
[attr^=value] //css3
[attr$=value] //css3
[attr~=value]  ~~ [title~="foo2"]  匹配 <a title="foo1 foo2 foo3">  可用[attr*=value]实现同等的选择效果
[attr|=value]  ~~ [lang|="en-us"] 匹配 <body lang="en-us" >   可用[attr^=value]实现同等的选择效果

伪类选择器：结构伪类选择器和状态伪类选择器

> 结构性伪类选择器 (是否根元素，是否为空，是否不包含某元素，子元素选择器(第一 最后 nth 奇偶 倒数)
:root //根元素
:not() // #box :not(h1)
:empty
:target

~~~子元素选择器 修饰限定作用
:first-child // ul#nav li:first-child 选择作为第一个子元素的li
:last-child // ul#nav li:last-child 选择作为最后一个子元素的li
:nth-child(n) // ul#nav li:nth-child(2){} 选择作为第二个子元素的li
:nth-last-child(n) // ul#nav li:nth-last-child(2) 选择作为倒数第2个子元素的li
:nth-child(odd) // ul#nav li:nth-child(odd) 选择序号为奇数的子元素且元素标签为li
:nth-child(even)

:nth-of-type(num/odd/even)
如 dl dt:nth-of-type(odd){} 表示在 dl下的dt中选择第奇数个的dt
:nth-last-of-type(n) // 选中的元素中倒数第几个

:nth-child(2n+1){}

:only-child // li:only-child

> 状态伪类选择器 （悬停 激活 聚焦 可用 不可用 只读 可读写 选中)
:hover
:active
:focus
:enable
:disable
:read-only
:read-write

用于单选框 复选框的
:default //未选取状态
:checked //选取状态
:indeterminate //页面刚打开 无指定的状态

::selection //元素处于选中状态时的样式

~ selector // div ~ p 兄弟选择器 选择后面的同辈兄弟元素  ，结构伪类选择器

伪对象选择器
:after //指代元素结束标签前的位置
:before //指代元素开始标签后的位置

--------------------css3 样式属性 content -------------------------

content: string / url() / none / attr() / counter() /
p:after{content:"..."}
p:before{ content: "fe dev" }
p:after { content: none; }

p:after{ content: url('tuijian.png'); }
img:after { content: attr(alt); } //将图像alt属性的值 作为content的值

content属性 couter-increment属性

h1{counter-increment:mycounter;} //为元素定义计数器名称
h1:before{ content: couter(mycounter) } //元素前置内容为计数器 读取计数器mycounter的值

h2{counter-increment:myCounter;}
h2:before{content:"第"counter(myCounter)"章：";}

h2{counter-increment:myCounter;}
h2:before{color:#f00; content:"第"counter(myCounter)"章：";}

h2{counter-increment:myCounter;}
h2:before{color:#05a; content:counter(myCounter,upper-alpha)"章";}

h2{counter-increment:myCounter; counter-reset:sub;}
h2:before{color:#05a; content:counter(myCounter)"章";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"节";}

css3: css3选择器的更多相关文章

  1. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  2. CSS3常用选择器（三）

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  3. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  4. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  5. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  6. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

  7. CSS3 :nth-child() 选择器

    CSS3 :nth-child() 选择器 代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...

  8. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  9. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

随机推荐

  1. git、githup使用

    一.git安装.配置 git安装: root@ubuntu~# apt-get  install  git git配置githup/自己的git服务器端账号, 即在用户的home目录下生成.gitco ...

  2. cron 定时任务

    cron 是linux下的定时任务: M H D m d cmd.  这是一种cron文件格式.   M: 分钟(0-59). H:小时(0-23). D:天(1-31). m: 月(1-12). d ...

  3. vs2012新建项目产生的问题

    当用vs新建web项目时遇到

  4. Winform中上传、下载文件选择打开文件的位置

    打开将要上传的文件 var fileName="";OpenFileDialog fileDialog = new OpenFileDialog(); fileDialog.Mul ...

  5. jjjjQuery选择器

    此文为作者自用复习文章 jQuery选择器: 它不仅继承了CSS选择器简洁的语法, 还继承了其获取页面便捷高效的特点, 它还拥有更加完善的处理机制: 但jQuery选择器获取元素后,为该元素添加的是行 ...

  6. hibernate sql查询后对象转换成实体类

    在多表查询的时候使用hibernate的sql查询的时候,一般返回的是object[]数组,或者可以使用  session.createSQLQuery(sql).setResultTransform ...

  7. （C++编程规范第17条）避免使用”魔数“

    1.摘要: 程序设计并非魔数,所以不要故弄玄虚:要避免在代码中使用诸如42和3.14159这样的文字常量.它们本身没有提供任何说明,并且因为增加了难于检测的重复而使维护更加复杂.可以用符号名称和表达式 ...

  8. Linux学习之chage命令

    功能:修改帐号和密码的有效期限用法:chage[-l][-m mindays][-M maxdays][-I inactive][-E expiredate][-W warndays][-d last ...

  9. hadoop搭建杂记：Linux下不同linux主机之间文件copy的scp命令

    不同的Linux之间copy文件常用有3种方法: 不同的Linux之间copy文件常用有3种方法: ①ftp 就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的程序来进行文件 ...

  10. Asp.Net Core WebApi学习笔记（四）-- Middleware

    Asp.Net Core WebApi学习笔记(四)-- Middleware 本文记录了Asp.Net管道模型和Asp.Net Core的Middleware模型的对比,并在上一篇的基础上增加Mid ...