CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

CSS 3 现状

　　　　兼容性差，需添加私有前缀／移动端优于PC端／不断改进中／渐进增强原则／考虑用户群体／遵照产品的方案；

　　　　CSS3手册需要阅读其--阅读及使用指引

[]表示全部的可选项

|| 或者

| 表示多选一

? 表示 0个或1个

* 表示 0个或多个

{}表示范围 {A}代表出现A次，{A,B}代表出现A次以上B次以下，B可以省略，{A,} 代表至少出现A次，无上限

# 出现1次以上，以逗号隔开，可以选择后面跟大括号的方式精确表示重复次数：<length>#{1,4}.

!代表出现产生一个值，即使组内的值都可以省略，但至少有一个值不能呗省略：[A?B?C?]!

属性选择器

　　标签选择器／类名选择器／id选择器／后代选择器／标签指定（交集）选择器／并集选择器／子代选择器／通配符

　　　　div+p:选择div后第一个p

　　　　div~p:选择div后所有p

　　具体有以下5种形式：

　　　　E[attr] 表示存在attr属性即可: div[class]

　　　　E[attr=val] 表示属性值完全等于val： div[class=mydemo] ;

　　　　E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；div[class*=mydemo]

　　　　E[attr^=val] 表示的属性值里包含val字符并且在“起始”位置 ; div[class^=mydemo]

　　　　E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；div[class$=mydemo]

伪类选择器：

　　:link. 正常状态

　　:viaited 已经问过的链接

　　:hover 鼠标经过

　　:action 点击

　　CSS3 新增其他的伪类选择器

结构伪类：以某元素相对于其父元素或兄弟元素的位置来获取元素

　　　　E:first-child 第一个子元素

　　　　 E:last-child 最后一个子元素

　　　　 E:nth-child(n) 第n个子元素。计算方法是E元素的全部兄弟元素；

　　　　　　 div>ul>li:nth-child(3){. color:deeppink; }　　　第三个元素

　　　　 E:nth-last-child(n) 同E:nth-child(n)相似，只是。倒着计算 n<=0 的时候，选取无效

li:nth-child(2n-1){ color:red ;}.   //选择li父盒子中所有的奇数li

li:nth-child(odd){ color:blue;}    //奇数

li:nth-child(-1n+5 ) { color:yellow; } // 前面五个

li:nth-last-child(-1n+5 ) { color:green; } // 倒数的五个

li:nth-child ( 2n ) { color:pink }    // 偶数

li:nth-child (even) { color:black } // 偶数

E:empty 选中没有任何子节点的E元素；没有任何元素的子节点，包括空格。

E:target. 目标伪类，配合锚点进行使用，处于当前锚点的元素会被选中/ 图片切换

　　　　　　　　<li><a href="#title1"> CSS(层叠样式表）</a></li>　　

　　　　　　　　<h2 id="title">CSS (层叠样式表）</h2>

　　　　　　　　　　h2:target { color:red; }

伪元素选择器

　　伪元素E：befor{ }在之前添加 \ E::after{ } 在之后添加 \是一个行内元素，需要转换成块元素

　　E::first-letter {}文本的第一个字母或字：首字下沉...

　　E::first-line {} 文本第一行：文本第一行高亮...

　　E::selection {} 可改变选中文本的样式；

　　E：after 伪类，在新版本会自动被识为 E::after 目的：做兼容处理

颜色

　　opcity属性会被子代继承，无法更改子代的属性

　　transparent 完全透明，无法修改属性值

　　RGBA模式：红绿蓝 alpha

　　HSLA模式: H色相、色调。 0-360（红橙黄绿青蓝紫）

　　　　　　　 S:饱和度　　 0-100%

　　　　　　　 L：明度、亮度 0-100%

　　　　　　　 A: 透明度。 0-1

有颜色的地方都可以用半透明

文本shadow阴影：

　　text-shadow. 可分别设置偏移量、模糊度、颜色（可设透明度）

　　　　text-shadow: 水平距离垂直距离模糊程度颜色

　　　　水平偏移量：正值向右负值向左

　　　　垂直偏移量：正值向下负值向上

　　　　模糊度不能是负值／值越大越模糊。左下为正，右上为负。同一个文本可以有多个阴影

ul>li:nth-child(1) { text-shadow:-5px -5px #ccc;}
ul>li:nth-child(2) { text-shadow:-5px -5px #ccc;}
ul>li:nth-child(3) { text-shadow: 5px 5px 2px #ccc ,-5px -5px 2px #ccc;}

CSS3 中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box

　传统盒子模型：

　　　　宽度=padding+border+width／内容区域大小不变／总体大小变化

CSS3盒子模型：

　　　　box-sizing: content-box/padding-box/border-box

　　　　设置谁，谁不变

　　　　content-box：内容盒子，外加盒子，加大边距和边框会加大总体大小，内容区域大小不变

　　　　padding-box：内边距盒子

　　　　border-box：边框盒子，内减盒子。加内边距和边框只会减少内容的大小

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>‘

    <style>

        .items{

            width: 1100px;

            margin: 100px auto;

        }

        .itme{

            width: 316px;

            height: 170px;

            float: left;

            margin-right:20px;

            box-sizing: border-box;

        }

        .itme:hover{

            border: 5px solid #666;

        }

        img{

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <div class="items">

        <div class="itme">

            <img src="data:images/1.jpg" alt=""/>

        </div>

        <div class="itme">

            <img src="data:images/2.jpg" alt=""/>

        </div>

        <div class="itme">

            <img src="data:images/3.jpg" alt=""/>

        </div>

    </div>

</body>

</html>

border-box

　　私有化前缀：

　　　　解决兼容性问题

　　　　-webkit- 谷歌、苹果浏览器内核

　　　　-moz- 火狐浏览器内核

　　　　-ms-　IE浏览器内核　

　　　　-o-　　欧朋浏览器内核　　　　

   <style>

        .box{

            width: 1100px;

            height: 200px;

            border: 1px solid #000;

            margin:100px auto;

            /* 背景渐变*/

            /*

                -webkit-： chrome  safari  谷歌(webkit内核的) 苹果

                -moz-：火狐

                -ms-:ie

                -o-:　欧朋

            */

            background: -ms-linear-gradient(left,red 0%, green 100%);

            background: -webkit-linear-gradient(left,red 0%, yellow 50%, green 100%);

            background: -moz-linear-gradient(left,red 0%, green 100%);

            background: -o-linear-gradient(left,red 0%, green 100%);

            background: linear-gradient(left,red 0%, green 100%);

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>