学习CSS3的第一天

学习CSS3的第一天

ok！通过前面的HTML+CSS的学习我们也开始渐渐了解了网页的基础结构和初级样式（新来的表贝，记得looklook前面的文章哟）。那么我们今天在一起来学习学习升级版CSS3吧！够够够！
CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。
首先呢我们来了解了解这CSS3有啥特别的吼。
一、CSS3
CSS3 就是CSS2的一个进阶版本 带来很多新属性和新本样式
C3和C2最大的区别 C3是加入了动画的概念
最特别的呢，不在这，在于它的兼容性：
prefix（前缀） browser （浏览器）
-webkit chrome / safari
-moz firefox
-ms IE
-o opera
因为CSS3里面的样式太多且有的过于复杂，所以呢，有的浏览器厂商就要使自身浏览器适应，那么他的浏览器适应了，别的浏览器不能适应，那他肯定不愿共享撒，所以他就要为该样式添加自己制定的前缀。当然，有的样式是都支持的，所以就不用了加啦。针不戳！（小编在线卑微小声bb）

咳咳咳，继续继续

二、CSS3中新增选择器的功能 （敲黑板！注意注意，不是新增选择器哈，是功能功能。）
1、关系型选择器
关系型选择器
①E + A 下面一个满足条件的兄弟（同级）元素节点
注意三点：
①. 下面一个
②. 兄弟元素
③. 满足条件
具体代码如下：

    div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        div:hover+div {
            width: 100px;
            height: 100px;
            background-color: paleturquoise;
        }  

        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

显示页面效果： 鼠标指向div.one时，div.two执行样式，背景颜色变化，如下图

② E ~ A 下面所有满足条件的兄弟（同级）元素节点
注意三点：
①.下面所有
②.兄弟元素
③.满足条件
具体代码如下：

    div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        
        div:hover~div {
            width: 100px;
            height: 100px;
            background-color: paleturquoise;
        }

        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

显示页面效果：鼠标指向div.one时，div.two和div.three同时执行样式，背景颜色变化，如下图

所以大家记得分辨清楚，一个是下面一个同级元素，一个是下面所有同级元素！别弄混了！牢记牢记！

2、属性选择器
①E[attr~=“val”] 标签内有这个属性 并且值是独立存在的
注：独立存在就是，该值得两边不能有任何的字母或符号
具体代码如下：

        div[class~="one"] {
            width: 100px;
            height: 100px;
            background-color: paleturquoise;
        }

        <div class="one">1</div>
        <div class="onetwo">2</div>
        <div class="three">3</div>

显示页面效果：div.one 执行样式，宽高背景颜色都变化

给个机会，让我演示演示独立存在到底是啥意思

        div[class~="one"] {
            width: 100px;
            height: 100px;
            background-color: paleturquoise;
        }

        <div class="one">1</div>
        <div class="one two">2</div>
        <div class="three">3</div>

将将将！div.one和div.one two 都发生变化。
注意以上div类的值有啥变化（我把onetwo用空格隔开了变成了one two）。没错，答对了！大家真棒！
②E[attr^=“val”] 以val 开头
具体代码如下：

div[class^="a"] {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

    <div class="a">a</div>
    <div class="ab">ab</div>
    <div class="bc">bc</div>

显示页面效果：div.a和div.ab执行样式，宽高背景颜色都变化

③E[attr$=“val”] 以val 结尾
具体代码如下：

div[class$="b"] {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

    <div class="a">a</div>
    <div class="ab">ab</div>
    <div class="bc">bc</div>

显示页面效果：div.ab执行样式，宽高背景颜色都变化

④E[attr*=“val”] 包含val

div[class*="b"] {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

    <div class="a">a</div>
    <div class="ab">ab</div>
    <div class="bc">bc</div>

显示页面效果：div.ab和div.bc执行样式，宽高背景颜色都变化

3、伪类选择器
伪类选择器的新增样式老多了，我就总结了这一下常用的几种，还有拓展的大家记得给我评论评论，让卑微小编也长长见识吼。
第一类：
E：First- child 被选择标签的第一个子元素；E：last-child 被选择标签的最后一个子元素；E：nth-child（） 顺数第几个子元素；E:only-child 被选择标签唯一的一个子元素；E:nth-last-child（） 倒数第几个子元素。
第二类：
E:First-of-child 被选择标签这类标签的第一个子元素；E：last-of-type 被选择标签这类标签的最后一个子元素；E：nth-of-type（） 这类标签顺数第几个子元素；E:only-of-type 被选择标签这类标签唯一的一个子元素；E:nth-last-of-type（） 这类标签倒数第几个子元素。
注：这两类选择器的最大区别就在于：第一种受别的标签影响，而第二类不受，所以第二类用的比较广泛。
三、过渡——transition
transition 属性设置元素当过渡效果。
transition 属性是一个简写属性，用于设置四个过渡属性：
①transition-property 检索或设置对象中的参与过渡的属性
②transition-duration 检索或设置对象过渡的持续时间
③transition-timing-function 检索或设置对象中过渡的动画类型
④transition-delay 检索或设置对象延迟过渡的时间
组合写法： transition：① ② ③ ④ ；（一般③④不写）
具体代码如下：

div {
    width: 100px;
    height: 100px;
    background-color: darkorange;
    transition: all 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}

具体如图：当鼠标指向div时，div由橙色变为蓝色，且高宽也随之变大

好啦好啦！今天的学习到此为止，大家记得一定要自己动手哦！不要眼睛会了手和脑子跟不上哈，一定要自己多多动手，才能牢记!!!
多练手多练手多练手！重要的事情说三遍！overover。