CSS3.0新增规则

1、CSS3新增选择器

1.1 新增属性选择器

• [att^=”val”]

  • 选择属性值等于value或以value开头的元素

• [att$=”val”]

  • 选择属性值等于value或以value结尾的元素

• [att*=”val”]

  • 属性值中只要包含value即可

1.2 新增伪类选择器

nth-child相关伪类选择器

E:nth-child(n)：某元素的第n个子元素，必须是某个特定元素

<style type="text/css">
    ul li:nth-child(2){color:red}                    <!--ul中的第二个子元素是不是li元素-->
</style>
<ul>
    <h1>我是标题</h1>
    <li>我是列表内容</li>
    <li>我是列表内容</li>
</ul>

nth-child相关：

ul li:nth-last-child(2){color:red}                  /*父元素中从后面向前选择第n个元素是不是li元素*/
ul li:last-child{color:red}                             /*父元素中最后一个特定元素是不是li元素*/
ul li:only-child{color:red}                             /*父元素中li元素是不是父元素的唯一子元素*/

nth-of-type相关伪类选择器

E:nth-of-type(n)：某元素的第n个子元素

<style type="text/css">
    ul li:nth-of-type(2){color:red}                    <!--ul中的第二个li子元素-->
</style>
<ul>
    <h1>我是标题</h1>
    <li>我是列表内容</li>
    <li>我是列表内容</li>
</ul>

nth-of-type

ul li:nth-last-of-type(2){color:red}                /*从后面向前选择*/
ul li:first-of-type{color:red}                        /*父元素中的第一个特定元素*/
ul li:last-of-type{color:red}                        /*父元素中最后一个特定元素*/
ul li:only-of-type{color:red}                        /*特定元素是父元素的唯一子元素*/

表单伪类选择器

• ：checked 选择使用了checked属性的元素
• ：enabled 选择没有使用disabled属性的元素
• ：disabled 选择使用了disabled属性的元素
• ：focus 选择获取了焦点的元素

其它伪类选择器

• ：root 代表根元素，也就是HTML标记
• ：not（s） 排除某个选择器
• ：empty 空元素（没有任何子元素和文本的元素）
• ：target 选取当前活动的目标元素（常用于超链接标记中）

<style>
div{display:none;}
div:target{ display:block;}
</style>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

1.3 新增伪对象选择器（必须双冒号）

• E::placeholder 设置placeholder属性的样式
• E::selection 设定在浏览器中选中文本的样式

2、语法与规则

2.1 @media

指定样式表规则用于指定的媒体类型和查询条件。
常用媒体类型：screen（显示器）、all（所有设备）
常用关键字：and、not、only
常用媒体特性：max-width（最大宽度）、min-width（最小宽度）、orientation:portrait（竖屏）、orientation:landscape（横屏）、max-device-width（最大设备宽度）、-webkit-min-device-pixel-ratio: 2（像素比）

link样式引入：

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width：600px)" />
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width：600px) and (max-width:1000px)" />
<link rel="stylesheet" type="text/css" href="c.css" media="print  and (min-width：1000px)" />

style标记中使用：

@media screen and (max-width：600px){
    选择器{
         属性：属性值；
    } 
}

@import使用（基本不用）

@import url(a.css) screen and （max-width：600px）

2.2 @font-face：设置嵌入HTML文档的字体

需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。

嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。

.eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。

未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot');                                            /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'),         /* IE6-IE8 */
         url('diyfont.woff') format('woff'),                             /* chrome、firefox */
         url('diyfont.ttf') format('truetype'),                         /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg');                     /* iOS 4.1- */
}

2.3 @keyframes：CSS3的关键帧动画

2.3.1 定义关键帧动画

定义简单的关键帧动画

@keyframes demo {
    from { opacity: 1; }
    to { opacity: 0; }
}

定义复杂的关键帧动画

@keyframes demo {
    from { transform: translate(0, 0); }                                    /*也可以都使用百分比*/
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

2.3.2 使用关键帧动画

复合写法（写在动画的元素的css中）

-webkit-animation:动画播放时间 动画的延迟时间 动画名称 动画的速度曲线 动画的重复次数;

非复合写法

• animation-duration：动画持续时间
• animation-delay：动画延迟时间
• animation-name：动画名称（关键帧名称）

• animation-timing-function：动画运动形式

  • linear 匀速
  • ease 缓冲
  • ease-in 由慢到快。
  • ease-out 由快到慢。
  • ease-in-out 由慢到快再到慢。
  • cubic-bezier(number, number, number, number)

• animation-iteration-count：重复次数或infinite

• animation-direction：normal

  • alternate（动画第二次直接跳到0%的状态开始执行）

• animation-play-state：running或paused

• animation-fill-mode：none

  • forwards（ 设置对象状态为动画结束时的状态）
  • backwards（设置对象状态为动画开始时的状态）
  • both（设置对象状态为动画结束或开始的状态）

3、其它相关内容

3.1 取值与单位

• 新增颜色取值

  • rgba（） 带有透明度的rgb颜色值
  • hsl（） hsl颜色值
  • hsla（） 带有透明度的hsl颜色值

• 新增图像取值—-渐变色

  • linear-gradient(角度，颜色1部分，颜色2部分，…)

    • 角度

      • 45deg
      • to bottom

    • 颜色部分

      • 颜色起点百分比或像素
      • 颜色值

  • repeating-linear-gradient(角度，重复颜色的起始位置和颜色，重复颜色的结束位置和颜色)

    • 角度：同上
    • 颜色：同上

      repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%);
      

• 新增角度单位

  • deg 度（角度）

• 新增长度单位

  • rem 1rem=16px，可以通过根元素中的font-size属性进行调整
  • vw 视口宽度，1vw等于视口宽度的1%
  • vh 视口宽度，1vh等于视口高度的1%
  • vmax 相对于视口的宽度或高度中较大的那个
  • vmin 相对于视口的宽度或高度中较小的那个

• 新增时间单位

  • s 秒
  • ms 毫秒

• 新增特殊布局值与单位

  • fr 将你的元素占成多少份

3.2 函数

• 使用变量

:root{--bg:red}
div {background:var(--bg)}

• calc()

.test {width: calc(100% - 50px);}