p{
font-size: 15px; text-indent: 2em;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em; background: #ee0; color: red; font-weight: bold;
}
-->

CSS3与CSS2相比发生了很大的变化,CSS3的亮点功能包括实现圆角、阴影、新的flex伸缩布局模型、多列布局模型、填充色的渐变、2D变形(位移、缩放、旋转、倾斜)、3D变形、动画(transition过渡动画、animation关键帧动画)等。看到这些字眼,你实际上已经可以深深感受到CSS3的野心,通过这些东西基本上都可以做出很棒的多媒体演示了,flash、Powerpoint制作演示也无外乎这些东西而已!

确实如此,CSS从CSS3开始,已经从单纯的实现静态页面元素布局美化之中超脱出来,向静态页面元素的互动进军,我们可以不使用Javascript即可实现很多有意思的动画效果。接下来我将这一段时间以来所学CSS3的内容按模块整理出来,首先整理的部分是CSS3的选择器。

之所以首先整理选择器,是因为在CSS3中写入样式代码时,首先需要确定的就是选择什么标签进行格式设置。CSS的选择器非常丰富,它不仅可以被用在CSS中,还可以被应用到很多场合,比如JQuery、D3、Html Canvas绘图中。因而,使用好CSS的选择器,包括CSS3新增的选择器非常重要。CSS3的选择器可以大致分内五大类别:基本选择器、层次选择器、伪类选择器、伪元素以及属性选择器。

基本选择器

基本选择器是使用最频繁的选择器,早在CSS1版本就已经被定义。

选择器 类型 描述 实例
* 通配选择器 选择文档中所有的HTML元素  *{margin:0;padding:0;}
div、p、span等标签名 元素选择器 选择指定标签对应的HTML元素 div{float:left;} 
#id ID选择器 选择ID属性为"id"的任意HTML元素  #firstDiv{background:gray;}
.classname 类别选择器 选择class属性为"classname"的任意HTML元素 .demo{border:1px solid #ccc;} 
selector1,selector2 群组选择器 选择由selector1和selector2选择器选择元素的组合后的集合  

多类选择器:该选择器是类选择器使用的一个特殊方法,我们可以为我们的页面元素设置一个多类class属性,其属性间用空格分割,代码参考如下:

 <style>
.important{...}
.title{...}
.item{...}
.important.item.title{...}
</style> <ul class="clearfix demo">
<li class="important item title">important</li>
<li class="important itemeven">important</li>
<li class="important itemodd">important</li>
</ul>

以上代码中多个类选择器内部的设置我省略掉了,只是通过代码来说明多类选择器的应用场合及使用方法。

层次选择器

层次选择器通过HTMl的DOM元素间的层次关系获取定位页面元素,其层次关系分为后代、父子、兄弟关系,其中兄弟关系又分相邻兄弟、通用兄弟关系。

选择器 类型 描述 实例
A B 后代选择器 选择包含在A元素中所有的B元素,A元素是B元素的祖宗 div p{text-indent:2em;}
A>B 子选择器 选择A元素下一层中所有的B元素,A元素是B元素的父亲 div>p{text-indent:2em;}
A+B 相邻兄弟选择器 选择紧接在A元素后,与A元素同层次的一个B元素  
A~B 通用兄弟选择器 选择在A元素后,与A元素同层次的所有B元素  

伪类选择器

伪类选择器又分为六种:动态伪类选择器、目标伪类选择器、语言伪类选择器、状态伪类选择器、结构伪类选择器和否定伪类选择器

选择器 类型 描述 实例
A:link 动态伪类选择器 选择所有A元素,且这些元素定义了超链接并且还未被访问过 a:link{}
A:visited 同上 选择所有A元素,且这些元素被定义了超链接并且已被访问过  
A:active 同上 选择所有A元素,且这些元素被激活  
A:hover 同上 选择所有A元素,且鼠标停留在当前A元素上  
A:focus 同上 选择所有A元素,且这些A元素当前获取了焦点  
A:target 目标伪类选择器 选择所有A元素,且A元素被相关的URL所指向  
A:lang(language) 语言伪类选择器 选择所有A元素,且A元素被指定了lang属性,其属性值为"language"  
A:checked 状态伪类选择器 选择复选或单选按钮,且其处于被选中状态  
A:enabled 同上 选择所有被启用的表单元素   
A:disabled 同上 选择所有被禁用的表单元素   
A:not(B) 否定伪类选择器 找到不是B的所有A元素   

结构伪类选择器比较多,以下我再用一个表格单独来显示:

选择器 描述 实例
A:first-child 选择一个A元素,且A元素是其父元素中的第一个子元素  
A:last-child 选择一个A元素,且A元素是其父元素中的最后一个子元素  
A:root 选择A元素所在文档的根元素,一般是<html>标签  
A B:nth-child(n) 选择A元素中的第n个子元素,且这个子元素是B元素   
A B:nth-last-child(n) 选择A元素中的倒数第n个子元素,且这个元素是B元素  
A:nth-of-type(n) 选择一个A元素,且A元素是父元素中所有A元素的第n个  
A:nth-last-of-type(n) 选择一个A元素,且A元素是父元素中所有A元素的倒数第n个   
A:first-of-type 选择一个A元素,且A元素是父元素中所有A元素的第1个  
A:last-of-type 选择一个A元素,且A元素是父元素中所有A元素的倒数第1个  
A:only-child 选择一个A元素,且A元素在父元素中是唯一的一个元素  
A:only-of-type 选择一个A元素,且A元素在父元素中是唯一的一个A元素  
A:empty 选择A元素,且A元素不包含任何子元素  

伪元素

伪元素都带有2个冒号,其与伪类选择器存在差异,需要特别注意。

选择器 描述 实例
A::first-letter 选择A元素文字内容中第一个字母或文字  
A::first-line 选择A元素中第一行文字  
A::before 选择A元素的开始位置,使用时需要指定content属性  
A::after 选择A元素的结束位置,使用时需要指定content属性  
A::selection 选择A元素当前选择文字内容,只能指定background、color属性  

属性选择器

属性选择器基于元素的属性进行查找。

选择器 描述 实例
A[attr] 选择具有属性"attr"的所有A元素  
A[attr=val] 选择"attr"属性值等于"val"的所有A元素  
A[attr|=val] 选择"attr"属性值含有"val"或者以"val-"开头的所有A元素  
A[attr~=val] 选择"attr"属性值含有"val"这个单词(单词与单词间以空格分开)的所有A元素  
A[attr*=val] 选择"attr"属性值任意位置含有"val"的所有A元素  
A[attr^=val] 选择"attr"属性值以"val"开头的所有A元素  
A[attr$=val] 选择"attr"属性值以"val"结尾的所有A元素  

CSS3学习笔记(1)-CSS3选择器的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  4. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  5. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  6. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  7. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

  8. HTML5+CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  9. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

随机推荐

  1. 【图像浏览】FastStone Image Viewer——快速、小巧、功能强大

    FastStone Image Viewer 是一款免费(非商业用途)且小巧的看图软件. 其在在appinn.com的我最喜爱的<图片/照片浏览查看工具>调查结果中排第6名(总提名 140 ...

  2. Zabbix简介及安装

    前言 未经监控就上线的系统,就是裸奔,耍流氓. 监控对我们来说太重要了,监控工具也有很多,像,Cacti,Nagios,Ganglia,Zabbix等等,今天我们要介绍的是Zabbix,它的功能很强大 ...

  3. Mac上写C++

    用惯Windows的同学可能刚开始用Mac的时候并不知道如何写C++,我刚开始在Mac上写C++的时候也遇到过这个困扰,Mac上并没有Windows上自己用习惯的Visual C++,下面我分享一下个 ...

  4. p1221网络布线(最小生成树 Prim(普里母)算法) p1222 Watering Hole

    描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助.约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路 ...

  5. 每天一个linux命令(34)--top命令

    今天给领导发邮件,我这边虽然显示发出去了,但是他那边一直没收到,结果我以为我发了,他又一直在那边等结果.所以说,以后要另外发个信息或者QQ微信之类的说一声. top命令是Linux 下常用的性能分析工 ...

  6. Redis从入门到精通

    什么是Redis? Redis是非关系型数据库,是一个高性能的key-value数据库,它是开源的,更是免费的. Redis能做什么? 存储数据 Redis的优点有哪些? 1.它支持存储丰富的数据类型 ...

  7. Eclipse-ee 启动Tomcat后浏览器无法访问Tomat,并且Web项目服务部署

    环境: Ubuntu 14.04 + Eclipse-ee +  Tomcat7 问题: 在Eclipse中建立Server时选择的Tomcat7,Server的运行时选择的时自己安装的Tomcat目 ...

  8. js使用for in遍历时的细节问题

    今天在看别人代码过程中被 "for in"搞得有点晕,所以好好研究了一下,写下来分享给对 for in遍历理解有问题的朋友. 基本格式: for (property in expr ...

  9. linux命令分块总结---多操作才是真理

    ps:其实学习linux系统,多多联系我们现在使用的Windows系统,这样就可以事半功倍的学习: 一. 启动,关机,登入,登出相关命令 [login]: 登录 [logout] :登出 [shutd ...

  10. C++类对象大小的计算

    (一)常规类大小计算 C++类对象计算需要考虑很多东西,如成员变量大小,内存对齐,是否有虚函数,是否有虚继承等.接下来,我将对此举例说明. 以下内存测试环境为Win7+VS2012,操作系统为32位 ...