--------------------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. GridView隔行样式

    <AlternatingRowStyle BorderColor="#FF99CC" BorderStyle="Solid" />

  2. matlab GUI之自定义菜单小结

    自定义菜单 1.uimenu对象 h=uimenu('PropertyName','ProperValue') h=uimenu(parent,'PropertyName','ProperValue' ...

  3. sql server 2008 设计时 不允许保存更改

    什么 都不说了 上图

  4. 解决Collection <__NSArrayM: 0x7f8168f7a750> was mutated while being enumerated.'

    当程序出现这个提示的时候,是因为你一边便利数组,又同时修改这个数组里面的内容,导致崩溃,网上的方法如下: NSMutableArray * arrayTemp = xxx; NSArray * arr ...

  5. android EncodingUtils

    EncodingUtils 报错Cannot Resolve Symbol EncodingUtils   提示是:错误:程序包org.apache.http.util不存在 错误:找不到符号  符号 ...

  6. oracle基础代码使用

    create or replace procedure pr_test1 is v_case ) :;--定义变量 begin -- /*判断语句 then dbms_output.put_line( ...

  7. poj2311

    博弈论——sg,mex sg性质:1.在末态的状态点为N态. 2.P态的下一步有一个是N态 3.N态的下一步全部是P态. 当然这是对于单点一个游戏的情形,也相当于NIM只有一堆石子. mex(mini ...

  8. HBase shell 操作命令记录

    创建表:create 'tablename','column cluseter:column1,column2...columnn','column cluster:column1,column2.. ...

  9. js中递归解析xml

    xml结构: <RightMenuItems>  <Item Code="New" Name="新建" GroupCode="Edi ...

  10. MyEclipseアンロックの手順

    ↓ ↓ ↓ ↓ ↓ ↓