一、CSS3新增选择器

1.结构（位置）伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式

示例：

        /*指的是第一个li，是 ul :first-child 的简写，下一个同理*/li:first-child {background-color: pink;}li:last-child {background-color: blue;}/*li:nth-child(n) n代表第n个li*/li:nth-child(2) {background-color: pink;}/*even代表偶数，odd代表奇数*/li:nth-child(even) {background-color: pink;}li:nth-child(odd) {background-color: red;}/*nth-child(n)拓展：*//*n是从0算起的，也就是0 1 2 3 4 5*//*我们可以通过在其前面加倍数来控制我们需要的个数*//*也就是说n前面加几，就是求几的倍数*/li:nth-child(2n) {/*求偶数，也就是求2的倍数*/background-color: pink;}li:nth-child(4n) {/*求4的倍数*/background-color: blue;}

<ul><li class="12test">基督山伯爵</li><li>大佛普拉斯</li><li>三体</li><li class="test12">国土安全</li><li class="test">血迷宫</li><li>超时空同居</li><li>局外人</li><li class="test23">文化苦旅</li><li>无法证明</li><li>Forever</li><li class="223test">张艾嘉</li>
</ul>

2.属性选择器

选取标签带有某些特殊属性的选择器我们称为属性选择器。

示例：

        li[class] {background-color: pink;}/*类名为test的li都被选中*/li[class=test] {background-color: blue;}/*类名以test开头的li都被选中*/li[class^=test] {background-color: skyblue;}/*类名以test结尾的li都被选中*/li[class$=test] {background-color: deepskyblue;}/*类名中存在test的li都被选中*/li[class*=test] {background-color: deeppink;}

<ul><li class="12test">基督山伯爵</li><li>大佛普拉斯</li><li>三体</li><li class="test12">国土安全</li><li class="test">血迷宫</li><li>超时空同居</li><li>局外人</li><li class="test23">文化苦旅</li><li>无法证明</li><li>Forever</li><li class="223test">张艾嘉</li>
</ul>

自行测试。

3.伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

示例：

        /*这三类选择器都属于看看就好，平时较少用到*/p::first-letter {font-size: 100px;}p::first-line {color: #f10215;}p::selection {color: #cccccc;background-color: #000000;}

<p>I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the darkness at Tannh??user Gate. All those moments will be lost in time, like tears.. in rain. Time... to die</p>

效果：

4.E::before和E::after（重点）

记住content不能省略，内容可写可不写，同时两个选择器添加行内元素，我们可以用display进行转换。

        /*这两类选择器比较重要*//*before/after中必须声明content，否则无法使用，content可以为空*//*这两个选择器添加的内容是行内元素，也就是其宽高是跟随内容撑大的*//*可以用display进行转换*/div::before {display: block;content: 'West World：';width: 200px;height: 100px;text-align: center;line-height: 100px;background-color: pink;}div::after {content: ' ------R.R.Martin';}/*这两个属性的重要之处在于，我们只需要在页面中写一个div，而在CSS3中加入这两个属性就等于另外添加了两个盒子，这样的方法非常节省空间*/

<div>The violent delight have violent ends.</div>

效果：

二、CSS3盒子模型和过渡

1.CSS3盒子模型

CSS3中可以使用 box-sizing 来指定盒模型，其属性有 conten-box 和 border-box，这样我们计算盒子大小的方式就发生了改变。

（1）box-sizing: conten-box（默认值）

这种模式下，盒子的大小为 width+padding+border ，也就是我们普通CSS的盒模型，border和padding都会撑大盒子，我们在设置p+d时都需要适当调整盒子的宽度才不至于使得内容溢出。

（2）box-sizing

在这种模式下，盒子的大小为 width ，也就是说 padding和border是被包括到width中了，简单来说就是，添加这个盒模型之后，我们不需要再为padding和border的添加而修改宽度了，宽度会自行适应。

示例：

div {/*在正常的CSS2盒子模型中，如果加入padding和border属性，那么盒子本身就会被撑大，也就是我们需要缩小原先设定好的宽度才能够维持盒子在要求的大小内。*//*width: 300px; 原先的大小*//*以下为修改后的大小，这样能够保持盒子总体的宽高依旧在300px*//*width: 215px;*//*height: 220px;*/background-color: skyblue;padding: 40px;border-right: 5px solid red;/*而在CSS3中引入了新的盒子模型*/box-sizing: border-box;width: 300px;height: 300px;/*box-sizing共有两个属性：content-box  和  border-box*//*conten-box：指的是盒子大小为 width + padding + border，此值为其默认值，其让元素维持W3C的标准Box Mode。*//*border-box： 盒子大小为 width，就是说  padding 和 border 是包含到width里面的。*/}

<div></div>

2.过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式：

transition: 要过渡的属性花费时间运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开。

如果想要所有属性都参与过渡效果，那么属性名称处直接写 all 即可。

transition-duration：单位为s或ms，必须写单位。

tansition-timing-function：

transition-delay：默认是0s，可以省略。

transition要写在变化的本体中，不要写在hover或其他属性中。

示例：

        div {width: 200px;height: 200px;background-color: pink;/*transition 要写在过渡的本体，不要写在hover中*//*四个属性分别代表：*//*1.过渡部位*//*2.过渡的时间*//*3.过渡的方式（快/慢/普通）*//*4.开始过渡前的等待时间*/transition: all 0.5s ease-out 0s;}div:hover {width: 800px;height: 500px;}

<div></div>

【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）相关推荐

视频教程-CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变-HTML5/CSS
CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
Hive学习之路(二):Hive表操作详讲
操作内容简介一.操作前的准备二.Hive表操作详讲 1. 创建数据库 2. 查看所有数据库/表 3. 在Hive上直接操作HDFS 4. 在Hive上直接执行终端命令 5. 创建数据表/查看表的信 ...
python 剑指offer 学习之路(二)
剑指offer 学习之路合并两个排序的链表树的子结构顺时针打印矩阵包含min函数的栈从上往下打印二叉树二叉搜索树的后序遍历序列二叉树中和为某一值的路径复杂链表的复制数组中出现次数超过 ...
html弹性盒模型,Css3 弹性盒模型
我们来介绍一下Css3 弹性盒模型.Css3引入了新的盒子模型--弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相 ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...
一位前端开发者的计算机视觉学习之路——专访《Chrome扩展及应用开发》作者李喆
李喆从2011年开始接触Chrome扩展程序开发并发布了多款扩展程序,同年10月,他收到了新浪微博前端高级工程师职位的offer,次年4月火狐邀请他参与火狐浏览器扩展开发的工作.现在,李喆是吉林大学电 ...
前端爱好者的小白学习之路-2【补充】学会HTML你能写出来什么样子的页面？
作为笔者另一篇文章的补充本文基本素材以及练习思路来自黑马程序员 pink老师~ [1]练习最基础页面的写法~ 页面效果预览代码展示 <!DOCTYPE html> <html ...
三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...

【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）