CSS3新增特性（一）

<body>
    <div class="box">
        <p>这是box中的p标签</p>
        <p>这是box中的p标签</p>
        <div class="inner">
            <p>这是inner中的p标签</p>
        </div>
    </div>
    <p>这是一个单独的p标签</p>
</body>

用子级选择器选择box中的两个p：

html 复制代码

    <style> 
    .box>p{
        background-color: pink;
    }
    </style>

用子级选择器选择inner中的p：

html 复制代码

    <style> 
    .inner>p{
        color: red;
    }
    </style>

如果是之前学的后代选择器，会把box里面的所有p都选上，包括inner里面的p：

2. 兄弟选择器

兄弟选择器分两种：

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的一个兄弟元素，而且二者有相同的父元素 。
书写语法：E1 + E2 。

注意：

a）选中的是紧跟在 E1 之后的同级元素 E2。

b）只能选中紧跟在后面的一个 E2 元素。

c）二者有相同的父元素。

d）+ 符号前后可以添加空格书写。

示例：

现在div box1中有一个二级标题和四个p标签：

html 复制代码

<body>
    <div class="box1">
        <h2>二级标题</h2>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </div>
</body>

用兄弟选择器选择h2后面紧跟的那一个p：

html 复制代码

    <style> 
    .box1 h2 + p{
        background-color: pink;
    }
    </style>

如果在 h2 后面加一个 div ，css 代码不变，这是哪个都不会变成粉色，因为 h2 后面紧接的不是p而是div，所以哪个都不会被选中：

值得注意的是，相邻兄弟选择器并不是只能选择一个，看这种情况：

这是因为，段落1是一个p，选中了段落2，所以段落2变成粉色；段落2选中后面紧邻的段落,3 ，段落3选中后面紧邻的段落4，所以后面三个段落都会变成粉色。

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1~element2

注意：

a）选择 element1 之后出现的所有 element2，之前的不会被选中。

b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

c）~ 符号前后可以添加空格书写。

示例：

选择h2后面所有的p：

html 复制代码

    <style> 
    .box1 h2 ~ p{
        background-color: pink;
    }
    </style>

3. 结构伪类选择器

之前学过伪类选择器，它是选择一种状态或者某个位置，结构伪类选择器是选中某一个结构的伪类选择器，较常用的有6种：

① E:first-child

首先看第一个： E:first-child，如果E不写就是匹配父元素中的第一个子元素，不论这个子元素是什么，如果写了 E，就是第一个子元素E：

但是如果是

html 复制代码

    <style> 
    .box1 p:first-child{
        color: red;
    }
    </style>
</head>
<body>
    <div class="box1">
        <h2>二级标题</h2>
        <div>111</div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </div>
</body>

哪个都不会被选中，因为box1中第一个子元素不是p而是h2。

所以一般使用 first-child的时候不写 E ，因为不写肯定会选中第一个，写了容易出错。

② E:last-child

类似于 E:first-child，选中父元素中的最后一个且最后一个元素必须是E

③ nth-child（n）

• 括号中的n 可以是数字，关键字和公式

•括号中的 n 如果是数字，就是选择第 n 个子元素

• 常见的关键词 even 偶数 odd 奇数

• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）

• 但是第 0 元素或者超出了元素的个数会被忽略

比较常见的一些公式：

n为数字：

html 复制代码

    <style> 
    /* 选中box1中的第3个子元素 */
    .box1 :nth-child(3){
        background-color: aquamarine;
    }
    /* 选中box1中的第三个子元素并且这个子元素是p */
    .box1 p:nth-child(3){
        background-color: aquamarine;
    }
    </style>

n为关键字：

even 偶数个数的子元素 odd 奇数个数的子元素

html 复制代码

    <style> 
    /* 选中box1中的第奇数个子元素并且这个子元素是p */
    .box1 p:nth-child(odd){
        background-color: aquamarine;
    }
    </style>

n为公式：

html 复制代码

    <style> 
    /* 选中box1中的第0*3=,0,1*3=3，2*3=6...个子元素并且这个子元素是p */
    .box1 p:nth-child(3n){
        background-color: aquamarine;
    }
    </style>
</head>
<body>
    <div class="box1">
        <h2>二级标题</h2>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
</body>

④ E: firsh-of-type

将满足是E类型的子元素重新划分为一个小组，在小组中排序，找第一个

html 复制代码

    <style> 
    /* 选中box1中的p类型的第一个子元素 */
    .box1 p:first-of-type{
        background-color: aquamarine;
    }
    </style>

⑤ E: last-of-type

html 复制代码

    <style> 
    /* 选中box1中的h2类型的最后一个子元素 */
    .box1 h2:last-of-type{
        background-color: aquamarine;
    }
    </style>

⑥ E: nth-of-type(n)

制定类型E中的第n个子元素。

⑦ E:nth-child(n) 和E:nth-of-type(n) 的区别

• E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件 。

• E:nth-of-type(n) 匹配同类型中的第 n 个 同级兄弟元素E，会忽视其他同级的非同类型元素。

4. 伪元素选择器

前面学过<a>标签的伪元素选择器，其实CSS3新增了很多伪元素选择器：

E::before 在E元素内部的前面插入一个元素， E::after在 E元素内部的后面插入一个元素

现在场景：

h5 写法和传统写法区别

• 1. 单冒号 E:before（传统）

• 2. 双冒号 E::before（h5）

• 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪元素注意事项

• 伪元素只能给双标签添加，不能给单标签添加（div是双标签，所以这里完全没有问题）

• 伪元素的冒号前不能有空格 ，如 E ::before 这个写法是错误的

• 伪元素里面必须写上属性 content:"";

• before 和 after 创建一个元素，但是属于行内元素（宽度高度都是被内容撑起）。

如果想让它变成块元素可以设置 display: block; 然后就可以设置高度宽度了。

• 因为在 DOM 里面（JS）看不见刚才创建的元素，所以我们称为伪元素。

E::before和E::after

html 复制代码

  <style>  
  .box::before{
        display: block;
        width: 400px;
        height: 50px;
        content: "1";
        background-color: pink;
    }
    .box::after{
        display: block;
        width: 400px;
        height: 50px;
        content: "2";
        background-color: pink;
    }
    </style>

E::first-letter 和 E::first-line

这两个一般用来处理文字内容。

5. 属性选择器

属性选择器用来选择包含指定属性的标签。

①. E[att]

E[att] ：只要这个元素 E 设置过 att 这个属性那么就可以选中这个元素。

现在情景：两个单选框，两个复选框，两个按钮

如果这样写css：

html 复制代码

    <style>
    input{
        width: 100px;
        height: 30px;
    } 
    </style>

那么这六个input标签都会被选中，包括两个单选框、复选框以及按钮

只想选中设置了 name 属性的两个单选框，那么就可以使用 E[att]：

html 复制代码

    <style>
    input[name]{
        width: 100px;
        height: 30px;
    } 
    </style>

②. E[att="val"]

E[att="val"] ： E 元素设置了 att 属性且属性值等于 val 。

type属性这六个 input 标签都设置了，但我只选择设置了 type="checkbox" 的复选框：

html 复制代码

    <style>
    input[type="checkbox"]{
        width: 100px;
        height: 30px;
    } 
    </style>

③. E[att^="val"]

E[att^="val"] ： E 元素设置了 att 这个属性并且属性值以 "val" 开头：

例如还是像上面例子一样选中复选框，不需要写 checkbox 写完整，以check开头就可以：

html 复制代码

    <style>
    input[type^="check"]{
        width: 100px;
        height: 30px;
    } 
    </style>

还有一种情况：

这里单选框和复选框都设置了 class，并且属性值都是以 icon 开头：

④. E[att$="val"]

与E[^="val"]非常类似，只不过一个是以 val 开头，一个是以 val 结尾

class 属性的属性值以 dan 结尾的，选中两个单选框：

html 复制代码

    <style>
    input[class$="dan"]{
        width: 100px;
        height: 30px;
    } 
    </style>

⑤. E[att*="val"]

属性值 val 不一定在开头也不一定在结尾，只要属性值中包含 val 这些字符，不管在任何位置，都可以。

例如，选出 type 的属性值中包含 o 这个字母的：（单选框、复选框、按钮）

html 复制代码

    <style>
    input[type*="o"]{
        width: 100px;
        height: 30px;
    } 
    </style>

6. 选择器权重

• 基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
• 伪类选择器、属性选择器的权重等于类选择器。
• 伪元素选择器的权重等于标签选择器。

二、CSS3盒模型 box-sizing

盒模型就是用来设置与标签相关的一些位属性，比如宽、高、边框、内边距、外边距等。

在之前的学习中，我们知道，可以实体化 的区域是 padding+border+宽高区域，在CSS3中添加了一条属性 box-sizing 来专门指定盒模型：

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

content-box 保证盒子的书写区域不会变化，boeder-boc 保证边框及以内的区域不会变化。

content-box 标准模式（默认）

当不设置 box-sizing 属性时，默认是标准模式。

Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是width 和 height 部分。

现在情景：

html 复制代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">文字内容</div>
</body>

当添加了 padding: 10px; ，这10px不会在盒子的宽高内部，而是会扩出来，盒子总体大小增大了，但是内容区域始终保持200*200的效果不变。

添加 border: 10px solid blue; 也是类似的，书写区域还是200*200，盒子扩大。

border-box 怪异模式

Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩。

后期制作网页时，如果量出一个盒子总体宽高是固定的，padding和border都比较好测量，这时就无需手动计算内部内容区域的宽高，直接设置 box-sizing: border-box; 即可解决问题。

三、CSS3新增属性

CSS3新增属性：边框圆角、文字阴影、盒子阴影。

1. 边框圆角 border-radius

基础写法

• 属性名：border-radius

• 作用：设置边框的圆角，将元素的矩形效果改为圆角效果。

• 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比（不仅包含宽高，也包含padding 和 border，magin值不算）。

水平方向100px，垂直方向50px：

水平垂直方向都是50px：

如果想得到一个正圆，可以设置 border-radius 属性值为宽高的一半：

但是如果有padding 和 border ，那么也要考虑进来，设置为**（width+padding+border）/ 2** ：

单一属性

• border-top-left-radius: 半径; 左上角圆角化

• border-top-right-radius: 半径; 右上角圆角化

• border-bottom-right-radius: 半径; 右下角圆角化

• border-bottom-left-radius: 半径; 左下角圆角化

注意都是上下方向先写（top bottom ），左右方向（left right ）后写。

例如只想让右下角圆角化：

简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。

• 四值法 border-radius: 左上角右上角右下角左下角; （顺时针 方向）

•三值法 border-radius: 左上角右上角和左下角右下角 ; （顺时针 方向）

•二值法 border-radius: 左上角和右下角右上角和左下角 ;

• border-radius: 四个角相同;

/ 的属性值写法

斜线 / 比较特殊，需要好好理解。

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法（四值法三值法二值法一值法都可），/ 后面可以设置垂直方向四种值的写法（同样四种写法都行）。

后续做一些圆的效果，一般使用百分比的写法，避免自己计算 。

浏览器兼容

Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

2. 文字阴影 text-shadow

CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

元素内部加载坐标，（0,0）是原点，从这里开始加载，水平向右是 X 轴正方向，垂直向下是 Y 轴正方向：

语法

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。

虚化会更漂亮一些：

html 复制代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .word {
            margin: 50px;
            font: bold 30px/60px "微软雅黑";
            /* 文字阴影：水平位置 垂直位置 模糊程度 颜色 */
            text-shadow: 3px 3px 5px red;
        }
    </style>
</head>
<body>
    <p class="word">文字阴影效果</p>
</body>

多层阴影

多层阴影：比如一层阴影是绿色，一层阴影是红色，一层是红色.....

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。

注意：多阴影中，先写的阴影压盖在后写的阴影上。

一般为了多层阴影能够显示出来，会使每层阴影的水平和垂直位置不同

html 复制代码

    <style>
        .word {
            margin: 50px;
            font: bold 30px/60px "微软雅黑";
            /* 多层阴影 逗号分隔*/
            text-shadow: 3px 3px red,
            6px 6px blue,
            9px 9px green;
        }
    </style>

3. 盒子阴影 box-shadow

边框阴影

CSS3 中，box-shadow 属性用于对盒子边框添加阴影。

box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略的长度是 0。

html 复制代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 5px solid blue;
            /* 边框阴影：水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 */
            box-shadow: 5px 5px 5px 4px green;
        }
    </style>
</head>
<body>
    <div class="box"></div>>
</body>

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔 多个阴影的属性值。

注意：多阴影中，先写的阴影压盖在后写的阴影上。

4. 过渡属性

动画效果

CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画，这种歌制作的叫作帧动画，帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

CSS3产生之后，使用过渡属性制作动画。而且做出来的会更好一些。

过渡属性

属性名：transition

作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画 （过渡效果），并且当前元素只要有"属性"发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看到这种过渡效果，我们使用 :hover 切换状态。

语法格式：

transition：过渡的属性过渡时间运动曲线延时时间

具体来看：

单一属性写法

① transition-property 过渡的属性

• none 表示没有属性过渡，也就不会出现动画效果（默认值就是none）

• all 表示所有变化的属性都过渡

• 属性名使用具体的属性名，多个属性名中间逗号分隔

② 时间

有两个时间，即第一第二个属性值

• 过渡时间：以s秒为单位。

• 延时时间：以s秒为单位。0s也必须加单位。（0的话不能只写0，必须写0s）

③ transition-timing-function 时间曲线

贝塞尔曲线

其实前面五个都是一些特定参数，提前封装好的的效果

接下来了解一下贝塞尔曲线各个数值的含义：

水平轴是时间，竖直轴进度就是从A 位置走到 B 位置。开始位置是（0,0）点，结束位置是（1,1）点，水平方向从0走到1，竖直方向也是从0走到1，这些是已经定好的。

我们能控制到就是曲线，是快速完成还是慢速完成，还是以一个变速的效果。会设置一个 B 点和一个 C 点去控制。

示例

html 复制代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
           /* 过渡属性：属性 过渡时间 时间曲线 延时时间 */
           transition: all 2s linear 0s;
        }
        /* 设置终点，鼠标移上时才加载从而造成时间差 */
        .box:hover{
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

300px是起点，500px是终点，如果没有 transition: all 2s linear 0s; 就是鼠标移上时立即从300px变成500px，有了就是缓慢变成，一旦离开就会缓慢恢复为300px。

可以在这里自己配置贝塞尔曲线的参数：

拖动会出现值，直接将值复制到代码中即可。

浏览器兼容

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

• Safari 需要前缀 -webkit-。

• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。