html5基础教程_CSS3的新增选择器课件
html5+css3课件-4
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
《HTML5+CSS3》课件——第四章 CSS3选择器
✎ 4.1 属性选择器
4.1.3 E[att*=value]属性选择器
概念 E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值 包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略 则表示可以匹配满足条件的任意元素。
例如： div[id*=section]
概念 E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att 属性值包含前缀为value的子字符串。
例如： div[id^=section]
表示匹配包含id属性，且id属性值是以“section”字符串开头的 div元素。
✎ 4.1 属性选择器
4.1.2 E[att$=value]属性选择器
☞点击查看本小节知识架构
伪元素选Байду номын сангаас器
☞点击查看本小节知识架构
阶段案例——制作招聘页面
✎ 章节概要
选择器是CSS3中一个重要的内容，在上一 章中已经介绍过一些常用的选择器，这些选 择器基本上能够满足设计者常规的设计需 求。但在CSS3中还有一些选择器，使用这 些选择器可以大幅度提高设计者书写和修改 样式表的效率。
1
➢ :not选择器
2
➢ :only-child 选择器
3
➢ :first-child和:last-child选择器
4
➢ :nth-child(n)和:nth-last-child(n)选择器
5
➢ :nth-of-type(n)和:nth-last-of-type(n)选择器
6
➢ :empty选择器
7
✎ 4.3 结构化伪类选择器
前端开发培训技术分享 CSS3新增选择器(上)
前端开发培训技术分享 CSS3新增选择器(上)我们大家是不是对网页有了初步的了解了，我们CSS3还提供一新的选择器，为我们在写页面时提供了更方便的服务。
我们一起来看一下吧！一、CSS3新增选择器1.伪对象选择器：：before、：after或 ::before、::afterCSS3新增选择器选择器描述：before 设置在对象前（依据对象树的逻辑结构）发生的内容。
用来和content属性一起使用，并且必须定义content属性。
：after 设置在对象后（依据对象树的逻辑结构）发生的内容。
用来和content属性一起使用，并且必须定义content属性。
备注CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。
即E:before可转化为E::before伪对象选择器应用（：before和：after的使用几乎是一样）1)插入内容2)制定个别元素不进行插入3)插入图像文件<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>使用选择器插入内容</title><style>h2:before{content:"Title";color:#fff;background: green;padding:1px5px;margin-right:10px;}h2.nocontent:before{content:none;}</style></head><body><h1>使用选择器插入内容</h1><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2 class="nocontent">使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2></body></html>案例一代码：显示效果案例二代码：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>插入图片文件</title><style>h2.hot:after{content: url(hot.gif);}h2.digest:after{content: url(digest.gif);}h2.xinren:after{content: url(xinren.gif);}</style></head><body><h1>插入图片文件</h1><h2 class="hot">插入图片文件</h2><h2 class="digest">插入图片文件</h2><h2 class="hot">插入图片文件</h2><h2 class="hot">插入图片文件</h2><h2 class="xinren">插入图片文件</h2><h2>插入图片文件</h2></body></html>显示效果：案例三：万能清除浮动的方法大家都知道我们在讲浮动的时候，使用浮动会产生副作用:导致父元素的高度塌陷，后面的元素占了浮动元素的空间。
html5+css3课件-6
第5章 CSS样式属性
返 回
例如：
5.1.3 CSS3新增字体属性
代码分析：
上例中，font-family属性指定字体名称为myFirstFon， src设置自定义字体的相对路径或绝对路径。在<div>元素中 通过font-family属性来引用字体的名称。
第5章 CSS样式属性
返 回
5.2 CSS控制文本的样式
font-family属性的语法格式如下：
font-family:”字体1”,”字体2”,”字体3”; 描述：
浏览器不支持第一个字体时，会采用第二个字体，以此 类推。如果浏览器不支持定义的字体，则采用系统的默认 字体。 例如：
p{font-family:Arial, 楷体;}
第5章 CSS样式属性
返 回
体；bolder表示特粗体；lighter表示特细体；number取值 范围为100~900，一般情况下都是整百的数，400等价于 normal，700等价于bold。
第5章 CSS样式属性
返 回
5.1.1 设置字体属性 5．字体变形（font-variant）
font-variant属性用来将英文字体设定小型的大 写字母，小型大写字母不是一般的大写字母，也 不是小写字母，而是采用不同大小的大写字母。
及单位组成表示字符间隔。
第5章 CSS样式属性
返 回
5.2.1 文本属性 4．文字修饰（text-decoration）
text-decoration属性主要是对文本进行修饰，有 多种修饰效果，如下划线、删除线等。
语法：
text-decoration:none | underline | overline |
HTML5+CSS3网页设计基础 第五章 CSS3选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第9页
5.1.5 案例码 5-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第10页
5.2 伪类选择器
本节主要内容：
案例分析
:first-child和:last-child选择器
:first-child 选择器用于选取属于其父元素的首个子元素。 :last-child 选择器用于选择属于其父元素的最后一个子元 素。 参考代码：5-2-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第13页
5.2.3 :nth-child(n)和:nth-last-child(n)选择器
第5章 CSS3选择器
第2页
本章的学习目标
掌握CSS3中新增属性选择器的用法，能运用属 性选择器选择页面上的元素添加样式。
掌握常用的伪类选择器的用法，能够为名称相同 或类型相同的子元素定义不同的样式。
掌握伪元素选择器的用法，能够在页面上特定位 置插入需要的文字或图片。 掌握链接伪类的用法，能够用链接伪类实现页面 上超链接的特效。
第5章 CSS3选择器
第20页
5.3.2 :before选择器
:before 选择器实现在被选元素的内容前面插入内容。 格式： E:before{ content:”文字”/url(); } content属性来指定要插入的内容，可以是用双引号括起来 的文本或用url()指定路径的图片。 参考代码：5-3-1.html
第24页
5.4.1 案例分析
HTML5前端培训技术分享 CSS3新增选择器(下)
HTML5前端培训技术分享 CSS3新增选择器(下)2.伪类选择器E:first-line/E::first-line设置对象内的第一行的样式、E:first-letter/E::first-letter设置对象内的第一个字符的样式。
比如有一段文本，没有给该文本加宽度，他会随着浏览器的的变化而变化，那我们怎么保证第一行文本永远跟别的文本的状态不一致呢！代码：显示效果如果设置第一个字有特殊的状态，也有很方便的选择器那就是first-letter. 代码：<html><head><meta charset="utf-8"><title>CSS3新增选择器</title><style>p:first-line{line-height:28px;color: red;}p:first-letter{color: yellow;background:#ADFF2F;font-size:30px;}</style></head><body><p>七星瓢虫是鞘翅目瓢虫科的捕食性昆虫，它的身体像半个圆球，头黑黑的翅膀是橘色的。
触角很短，不太明显，他的脚在大大的翅膀底下，他的口器既有咀嚼食物的能力，因为它的翅膀有七个黑色的圆点点所以人们叫它七星瓢虫，七星瓢虫为益虫，成虫可捕食麦蚜、棉蚜、槐蚜、桃蚜、介壳虫、壁虱等害虫，可大大减轻树木、瓜果及各种农作物遭受害虫的损害，被人们称为“活农药”，在我国各地广泛分布。
在华北南部，俗称“花大姐”。
其他的星瓢虫一生要经过卵、幼虫、蛹和成虫4个不同发育阶段。
人工饲养七星瓢虫的成虫，室内的温度要控制在20－25℃之间，相对湿度在70%－80%，成虫产卵时要求温度较高，可在25℃饲养。
但饲养幼虫以平均温度20℃左右为好。
</p></body></html>显示效果：3.属性选择器E[att]代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS3新增选择器</title><style>input{margin:10px;}input[class]{border:1px solid#000;width:300px;height:25px;color:#f00;outline:none;}</style></head><body><input type="text" class="text"/><br><input type="email" /><br><input type="tel" class="tel"/> </body></html>显示效果：E[att="val"]代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS3新增选择器</title><style>input{margin:10px;width:300px;height:25px;outline:none;}input[type=text]{border:1px solid#000;color:#f00;}input[type=email]{border:1px solid#0000FF;color:#ADFF2F;}input[type=tel]{border:1px solid#00FFFF;color: deeppink;}</style></head><body><input type="text"/><br><input type="email" /><br><input type="tel"/></body></html>显示效果4.UI伪类选择器：checked案例一：}.btn[type=checkbox]+ label{display:block;width:89px;height:55px;font-size:0;background-image: url(a.jpg);background-repeat:no-repeat;}.btn[type=checkbox]:checked+ label{background-image: url(b.jpg);background-repeat:no-repeat;}</style></head><body><div class="checkbox"><input type="checkbox" id="apple" class="btn"><label for="apple">苹果</label></div></body></html>显示效果：案例二：HTML代码：<title>下拉菜单</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body><ul><li><input type="checkbox" name="item" id="item1" /><label for="item1">Friends</label><div class="options"><p><a href="#">Find New Friends</a></p><p><a href="#">Poke A Friend</a></p><p><a href="#">Incinerate Existing Friends</a></p></div></li><li><input type="checkbox" name="item" id="item2" /><label for="item2"> Videos</label><div class="options"><p><a href="#">My Videos</a></p><p><a href="#">My Downloaded Videos</a></p><p><a href="#">My Well Dodgy Videos</a></p></div></li><li><input type="checkbox" name="item" id="item3" /><label for="item3">Galleries</label><div class="options"><p><a href="#">My Deviant Art</a></p><p><a href="#">Latest Dribbble Images</a></p><p><a href="#">Sample Flickr Stream</a></p><p><a href="#">Sample Picasa Stream</a></p></div></li></ul></body></html>CSS代码：background:#3f4348;}ul{list-style:none;width:300px;margin:0auto;}ul li label{background:#575e63;border-top:1px solid#878e98;border-bottom:1px solid#33373d;color:#fff;display:block;height:40px;line-height:40px;text-indent:20px;width:300px;}ul div p{height:30px;line-height:30px;text-indent:20px;}ul p a{color:#999;}ul li input[type='checkbox'] {display:none;}.options{display:none;}ul li input[type='checkbox']:checked+label+.options{ display:block;}显示效果育知同创教育版权所有。
HTML5CSS3精品PPT课件
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
网站标准的简单历史
XHTML 1 Content
CSS2.1 Presentation
2001-2006
《全面系统的HTML5+CSS3基础课件》
本课件旨在全面系统地介绍HTML5和CSS3的基础知识，帮助你打下良好的前 端开发基础，从而在未来的学习和工作中更为得心应手。
HTML5和CSS3的区别
1 HTML5
用于网页结构和内容的定义，新增了一些语义化标签。
2 CSS3
用于网页的样式和表现，新增了一些强大的样式选择器和效果。
HTML5和CSS3的一些特性，如音 视频处理、3D建模、WebGL等， 在虚拟现实技术中具有重要应用。
HTML5和CSS3的一些特性，如地 理位置标签、WebRTC等，在智 能交通领域中具有广泛应用。
HTML5表单和表格
表格
如<table>标签，支持表格的创建、合并单元格、 添加边框、设置列宽等操作，可以有效地展示有规 律的数据。
表单
如<form>标签，支持用户输入、选择、上传文件 等操作，可以有效地获取用户信息和行为。
实际案例和练习
案例
使用HTML5和CSS3实现一个简单的响应式网页， 调整窗口大小时，页面可以自适应地变化。
练习
编写一个HTML5表单，包含多种表单元素，添 加一些CSS3效果，如悬浮、变形、渐变等。
CSS3选择器和样式
1
P ro p erty
2
CSS3新增了一些属性，如border-radius、
box-shadow、text-shadow等，可以实现
更加精细的样式效果。
3
Selecto r
使用CSS3选择器，可以根据文档结构、 标签属性、伪类等选择元素，实现更加 精细的样式控制。
CSS框架
常用的CSS框架如Bootstrap、Materialize 等，提供了一系列预设样式和模板，可 以大大加快网页开发效率。
《HTML5+CSS3课件》
CSS3简介 CSS3将为你提供最新 和最流行的HTML与CSS规范— —将 CSS 与 JavaScript 结合， 可创建出动态交互效果的网站 设计。我们将重点涵盖它最流 行的技术，包括Flexbox，Grid 和自适应设计等。
HTML5语法和标签 HTML5语法 创造出能够改变互联网，流媒 体，搜索引擎等的松散性和变 革性。我们将重点讲解它的标 签与语法。了解优秀的代码结 构和组织的重要性。这能够让 我们更好地构建合适的的页面， 并有助于提高SEO表现。
HTML5 + CSS3的应用案例 We’ll showcase a plethora of eye-catching examples to demonstrate the scope of what you'll learn. Explore design examples that use decorative typography and unique interfaces. Discover how to optimize for mobile with responsive design. We’ll also examine graphic and web-page design from a business perspective.
HTML5+CSS3课件
掌握HTML5和CSS3的基础知识，了解众多应用案例，创建专业级网站！
课程介绍HTML5+CSS3课件将为你提供基 础知识和技能，让你可以创作出好看和 高效的网站页面。您将学到语法和标记、 优化和实践方法。这是精美浸润式学习 的时刻！
HTML5简介 我们将探讨最新的 HTML5标准。这门语言大大强 化了语义化标识化，还为开发 者开放了更加丰富的能力，包 括地理位置和多媒体编码能力， 这也是当前建站行业的高级应 用之一。我们将深入学习它的 标签和语法。
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第20页
特性和子串选择器
如果给定的特性存在，最基本的特性选择 器就允许设置元素的样式。 “Starts with” 子串特性选择器 “ends with” 子串特性选择器 “Contains” 子串特性选择器
HTML5+CSS3网页设计实例教程
CSS3选择器在IE9+、Firefox 3.5+、 Chrome 4+、Safari 4+和Opera 10+上获 得了完全的支持。 IE6、IE7和IE8不支持CSS3选择器，IE7和 IE8支持一般同级组合器、:first-child和所 有特性选择器，但使用内置的JavaScript 或jQuery库编写填充物程序，就可以解决 这个问题。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第12页
后代选择器
“后代选择器”(descendant selector)匹配 一种元素类型，该元素为另一指定元素的后 代元素(或者说嵌套于另一指定元素内)，而 并非仅仅是直接子元素。尽管大于号被用于 作为子选择器的连接符，但是后代选择器的 连接符却是空格。查看以下示例： table b {}
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第28页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第29页
8.5 选择器的未来
《HTML5+CSS3》课件——第三章-初识CSS3
✎ 3.3 CSS核心基础
行内式
内嵌式
链入式
导入式
链入式
链入式是将所有的样式放在一个或多个以.css为扩展名 的外部样式表文件中，通过<link />标签将外部样式 表文件链接到HTML文档中，其基本语法格式如下:
<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
✎ 3.2 CSS的优势
CSS3是CSS规范的最新版本，在CSS2.1的基础 上增加了很多强大的新功能，以帮助开发人员 解决一些实际面临的问题。使用CSS3不仅可以 设计炫酷美观的网页，还能提高网页性能。
与传统的CSS相比，CSS3最突出的优势主要体现在节约成本和 提高性能两方面，本节将做具体介绍。
本章将详细讲解CSS及其最新版本CSS3的相关知识。
✎ 3.1 结构与表现分离
什么是结构与表现分离？
✎ 3.1 结构与表现分离
结构与表现相分离是指在网页设计中，HTML 标签只用于搭建网页的基本结构，不使用标签 属性设置显示样式，所有的样式交由CSS来设 置。
✎ 3.1 结构与表现分离
如今大多数网页都是遵循Web标准开发的，即用 HTML编写网页结构和内容，而相关版面布局、文 本或图片的显示样式都使用CSS控制。HTML与 CSS的关系就像人的身体与衣服，通过更改CSS样 式，可以轻松控制网页的表现样式。
✎ 3.2 CSS的优势
CSS3的新功能帮我们摒弃了冗余的代码结构，远离很多Ja vascript脚本或者Flash代码。网页设计者不再需要花大把 时间去写脚本，极大的节约了开发成本。
css3课件
8.1新增的选择器
8.1.1伪类选择器 3. :not和 :target CSS3还增加了2个特殊的伪类选择器 （1）Selector：target 匹配符合Selector选择器且必须是命名锚点目标
的元素 （2）Selector1：not（Selector2） 匹配符合Selector1选择器但不符
8.3边框和阴影
CSS3提供了创建圆角边框、向矩形添加阴影、 使用图片来绘制边框的样式功能。
8.3.1渐变边框
CSS3提供了4个属性支持渐变边框（课本P304） 1.border-top-colors 2.border-right-colors 3.border-bottom-colors
4.borde.3.2圆角边框
CSS3为圆角边框提供了以下属性支持（课本P304） 1.border-radius 2.border-top-left-radius 3.border-top-right-radius 4.border-bottom-right-radius 5.border-bottom-left-radius
8.3.4阴影
CSS3提供了box-shadow属性为块元素添加阴 影。box-shadow用于向块框添加一个或多个阴影 。该属性是由逗号分隔的阴影列表，每个阴影由24个长度值、可选的颜色值以及可选的inset关键词 来规定。省略长度值为0
第4章CSS3选择器
✎
4.3 知识点讲解
6、 :nth-of-type(n)和:nth-last-of-type(n)选择器
本节引入:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同 之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定 类型的第 n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择 器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。
<style type="text/css"> p:nth-child(2){ color:pink;} p:nth-last-child(2){ color:blue;} </style> </head>
<body> <p>第一篇 毕业了</p> <p>第二篇 关于考试</p> <p>第三篇 夏日飞舞</p> <p>第四篇 惆怅的心</p> <p>第五篇 畅谈美丽</p> </body>
第四章css3选择器html5关系选择器css层叠性继承性与优先级属性选择器结构化伪类选择器链接伪类html5伪元素选择器属性选择器结构化伪类选择器目录关系选择器链接伪类制作网页设计软件列表属性选择器知识引入eattvalue属性选择器eattvalue属性选择器eattvalue属性选择器知识点讲解eattvalue属性选择器是指选择名称为e的标记且该标记定义了att属性att属性值包含前缀为value的子字符串
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实战操作
表单效果演示
属性选择器
选择符 E[att]
E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"]
版本 CSS2
CSS2 CSS2 CSS3 CSS3
简介 选择具有att属性的E元素。
CSS3
CSS3
匹配同类型中的倒数第n个同级兄弟元素E。
匹配没有任何子元素（包括text节点）的元素E。
实战操作
各行变色表格：
UI元素状 E:disabled 版本 CSS3 CSS3 CSS3 简介
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
CSS1&2伪类选择器
选择符 E:link E:visited E:hover E:active E:focus E:lang() 类型 链接伪类选择器 链接伪类选择器 用户操作伪类选择器 用户操作伪类选择器 用户操作伪类选择器 :lang()伪类选择器 简介 设置超链接a在未被访问前的样式。 设置超链接a在其链接地址已被访问过时的样 式。 设置元素在其鼠标悬停时的样式。 设置元素在被用户激活（在鼠标点击与释放 之间发生的事件）时的样式。 设置元素在成为输入焦点（该元素的 onfocus事件发生）时的样式。 匹配使用特殊语言的E元素。
CSS3的新增选择器
主讲：丛浩 @LAMP兄弟连丛浩 conghao@
本章内容
CSS1&2中的选择器介绍 CSS3新增选择器介绍 CSS3 属性选择器 CSS3 结构伪类选择器 CSS3 UI元素状态伪类选择器 CSS3 其他新增选择器
CSS1&2选择器类型
CSS1&2选择器结束
CSS3新增选择器类型
关系选择器 伪类选择器 结构性伪类选择器 UI元素状态伪类选择器
属性选择器
伪对象选择器
关系选择器
选择符 EF 名称 包含选择符 版本 CSS1 简介 选择所有被E元素包含的F元素。
E>F E+F
E~F
子选择符 相邻选择符
兄弟选择符
选择具有att属性且属性值等于val的E元素。 选择具有att属性且属性值为一用空格分隔的 字词列表，其中一个等于val的E元素。
选择具有att属性且属性值为以val开头的字 符串的E元素。
选择具有att属性且属性值为以val结尾的字 符串的E元素。 选择具有att属性且属性值为包含val的字符 串的E元素。 选择具有att属性且属性值为以val开头并用 连接符"-"分隔的字符串的E元素。
E:after/E::after E::selection
CSS3 CSS3
实战操作
伪对象选择器
课程结束
CSS2 CSS2
CSS3
选择所有作为E元素的子元素F。 选择紧贴在E元素之后F元素。
选择E元素所有兄弟元素F。
备注： 绿色行为CSS3新增选择器，为了便于组合记忆，幻灯片中也列举了同 类型的CSS1&2类选择器
实战操作
兄弟选择器实例：
显示效果
结构伪类选择器
选择符 E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-oftype(n) E:empty 版本 CSS3 CSS2 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 简介 匹配E元素在文档的根元素。 匹配父元素的第一个子元素E。 匹配父元素的最后一个子元素E。 匹配父元素仅有的一个子元素E。 匹配父元素的第n个子元素E。 匹配父元素的倒数第n个子元素E。 匹配同类型中的第一个同级兄弟元素E。 匹配同类型中的最后一个同级兄弟元素E。 匹配同类型中的唯一的一个同级兄弟元素E。 匹配同类型中的第n个同级兄弟元素E。
CSS1&2伪对象选择器
选择符 E:first-letter E:first-line E:before E:after 类型 CSS1 CSS1 CSS2 CSS2 简介 设置对象内的第一个字符的样式。 设置对象内的第一行的样式。 设置在对象前（依据对象树的逻辑结构）发生的内 容。用来和content属性一起使用 设置在对象后（依据对象树的逻辑结构）发生的内 容。用来和content属性一起使用
E[att*="val"]
E[att|="val"]
CSS3
CSS2实战操作 文件下载类型选择：伪对象选择器
选择符 E:first-letter/E::first-letter E:first-line/E::first-line E:before/E::before 版本 CSS3 CSS3 CSS3 简介 设置对象内的第一个字符的样式。 设置对象内的第一行的样式。 设置在对象前（依据对象树的逻辑结构） 发生的内容。用来和content属性一起使 用 设置在对象后（依据对象树的逻辑结构） 发生的内容。用来和content属性一起使 用 设置对象被选择时的颜色。
元素选择器 关系选择器 伪类选择器 属性选择器
伪对象选择器
CSS1&2元素选择器
选择符 * E 类型 通配选择符 类型(HTML)选择符 版本 CSS2 CSS1 简介 所有元素对象。 以文档语言对象类型作为选择符。 以唯一标识符id属性等于myid的E 对象作为选择符。 以class属性包含myclass的E对象 作为选择符。
CSS1&2属性选择器
选择符 E[att] E[att="val"] E[att~="val"] E[att|="val"] 类型 CSS2 CSS2 CSS2 CSS2 简介 选择具有att属性的E元素。 选择具有att属性且属性值等于val的E元素。 选择具有att属性且属性值为一用空格分隔的字词列 表，其中一个等于val的E元素。 选择具有att属性且属性值为以val开头并用连接符""分隔的字符串的E元素。
E#myid
E.myclass
id选择符
class选择符
CSS1
CSS1
备注:E 是Element的缩写，表示元素的意思
CSS1&2关系选择器
选择符 EF E>F E+F 类型 包含选择符 子选择符 相邻选择符 版本 CSS1 CSS2 CSS2 简介 选择所有被E元素包含的F元素。 选择所有作为E元素的子元素F。 选择紧贴在E元素之后F元素。