--------------------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. CentOS配置ftp服务器

    1.首先更新yum 源 yum update 2. 安装vsftpd yum install vsftpd -y   // 安装    移除是 yum remove vsftpd 3. 配置Vsftp ...

  2. Oracle分析函数之开窗子句-即WINDOWING子句

    Oracle的分析函数,对我们进行统计有很大的帮助,可以避免一些子查询等操作,在统计中,我们对开窗函数的接触较少,下面主要介绍下开窗函数的使用; http://www.itpub.net/thread ...

  3. Csharp多态的实现概述

    (1)什么是多态, 多态就是一个类表现出多种不同的形态, 他的核心是子类对象作为父类对象使用 (2)怎么实现多态, 在Csharp中,可以用接口, 虚方法, 抽象类实现多态,当然,不管是这三种的那一个 ...

  4. 大数据之scala基本语法学习

    package edu.snnu.test object list2 { //把字符串转化成一个char类型的list "99 Red Balloons".toList //> ...

  5. Java 遍历文件下jpg图片并解析图片

      package filetest; import java.io.File; import java.io.FilenameFilter; import java.io.IOException; ...

  6. Aprori算法[关联规则算法]

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <?p ...

  7. Naive Bayes Theorem and Application - Theorem

    Naive Bayes Theorm And Application - Theorem Naive Bayes model: 1. Naive Bayes model 2. model: discr ...

  8. 关于This的经典题目

    这个题目见过很多次了 var x = 10; var foo = { x: 20, bar: function() { var x = 30; return this.x; } }; alert(fo ...

  9. 转: git常用命令

    # git配置 #---------------------------------------------- #配置用户名和邮箱: $ git config --global user.name & ...

  10. 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...