--------------------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. BZOJ 1901: Zju2112 Dynamic Rankings( 树状数组套主席树 )

    裸的带修改主席树.. 之前用BIT套Splay( http://www.cnblogs.com/JSZX11556/p/4625552.html )A过..但是还是线段树好写...而且快(常数比平衡树 ...

  2. SQLite 字符串连接

    对Mysql可以使用CONCAT进行字符串连接, 但使用sqlite时,没有找到相应的方法,后在网上查找后,可以使用||来连接字符串 例: select 'a'||'b'

  3. 最近比较迷flash professional cc 做PPT，做一个flash做动态打字效果的教程

    想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...

  4. [原创]Python批量操作文件，批量合并

    最近几个小伙伴在手动合并一些文本文件,感觉可以用Python批量实现,就有了这段代码 import os import re import sys def printEnter(f1): #每两个文件 ...

  5. 树莓派高级GPIO库，wiringpi2 for python使用笔记（五）i2c读取测试

    wiringpi2显然也把i2c驱动带给了Python,手头上正巧有一个DS3231的模块,上边带了一个DS3231 RTC(实时时钟),与一片24C32,两个芯片均为iic总线设备,与树莓派接线如下 ...

  6. Git-常用命令集合

    该文章会陆续添加内容,学习网页来自http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 ...

  7. Win7下超级管理员创建普通权限任务

    已转至新的博客 http://www.raysoftware点击打开链接.cn/?p=49 项目中用到一个功能,Win7下超级管理员创建普通权限任务. 试了几种办法,例如获取资源管理器的Token,然 ...

  8. ubuntu openstack

    https://wiki.ubuntu.com/ServerTeam/CloudArchive/ sudo add-apt-repository cloud-archive:junoLong Term ...

  9. Thread’s start method and run method

    工作中用到了Thread,一开始用错了,仔细研究了一下,稍作整理. 前言,今天写代码居然这样写的 new Thread() { @Override public void run() { System ...

  10. C++运算符重载为非成员函数

    #include<iostream> using namespace std; class Complex{ public: Complex(double r=0.0,double i=0 ...