css、css3、scss的区别与联系

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
CSS 是用来表现HTML或XML的标记语言。
CSS语法由三部分构成：选择器、属性和值： selector {property: value}

CSS3 是最新的 CSS 标准。
css3比css多了一些样式设置而已。 css3是向前兼容的，也就是说，css中有效的code在css3也有效。

CSS3新增属性
box-shadow(阴影效果)
border-colors(为边框设置多种颜色)
boder-image(图片边框)
text-shadow(文本阴影)
text-overflow(文本截断)
border-radius(圆角边框)
opacity(不透明度)
box-sizing(控制盒模型的组成模式):指定两个boxes接壤
resize(元素缩放):指定一个div元素，允许用户调整大小
outline(外边框)
background-origin(指定背景图片从哪里开始显示)
background-clip(指定背景图片从什么位置开始裁切)
background(为一个元素指定多个背景)

SCSS 是一种被中断或编译成 CSS 的预处理器语言。它是一种特殊类型的 SASS(Syntactically Awesome Style Sheets)。SCSS 的脚本是在 Saasscript 中完成的。SCSS 包含 CSS 的所有功能，还添加了一些额外的特殊功能。

一、CSS的选择器

1、多（类）选择器

（1）类或标签
选择class=“cla1 cla2 cla3”的标签，改变【内容3】

<div class="cla1">
　　 内容1 
div>

<div class="cla1 cla2">
　　 内容2 
div>

<div class="cla1 cla2 cla3">
　　 内容3 
div>
1
2
3
4
5
6
7
8
9
10
11

.cla1.cla2.cla3 {
    width: 100%;
}
1
2
3

（2）标签与类的组合

<table class="cla1 cla2">
　　 内容 
table>
1
2
3

table.cla1.cla2 {
    width: 100%;
}
1
2
3

2、群组选择器

（1）类或标签
选择含有cla1、cla2、cla3任一个class的标签，改变【内容1】、【内容2】、【内容3】

<div class="cla1">
　　 内容1 
div>

<div class="cla1 cla2">
　　 内容2 
div>

<div class="cla1 cla2 cla3">
　　 内容3 
div>
1
2
3
4
5
6
7
8
9
10
11

.cla1, .cla2, .cla3 {
    width: 100%;
}
1
2
3

（2）标签与类的组合

<div class="cla1">
　　 内容1 
div>

<div class="cla2">
　　 内容2 
div>

<table>
　　 内容3 
table>
1
2
3
4
5
6
7
8
9
10
11

table, .cla1, .cla2 {
    width: 100%;
}
1
2
3

3、相邻选择器

（1）类或标签
选择cla1后面紧接的cla2（同一父级），改变【内容2】

<div class="cla0">
    <div class="cla1">
　　　　 内容1 
　　div>
    <div class="cla2">
　　　　 内容2 
　　div>
div>
1
2
3
4
5
6
7
8

.cla1 + .cla2 {
    width: 100%;
}
1
2
3

（2）标签与类的组合

<div class="cla0">
    <h1>
　　　　 内容1 
　　h1>
    <div class="cla1">
　　　　 内容2 
　　div>
div>
1
2
3
4
5
6
7
8

h1 + cla1 {
    width: 100%;
}
1
2
3

4、子代(类)选择器

（1）类或标签
选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】

<div class="cla1">
    <div class="cla2">
        <div class="cla3">
　　　　　　　 内容1 
　　　　　　　<div class="cla3">
　　　　　　　　　  内容2 
            div>
        div>
    div>
div>
1
2
3
4
5
6
7
8
9
10

.cla1
>.cla2
>.cla3 {
    width: 100%;
}
1
2
3
4
5

（2）标签与类的组合

<table>
    <div class="cla1">
        <td>
　　　　　　 内容 
　　　　　td>
    div>
table>
1
2
3
4
5
6
7

table
>.cla1
>td {
    width: 100%
}
1
2
3
4
5

5、后代(类)选择器

（1）类或标签
选择 cla1后代里面的全部cla3标签 （不管后代嵌套得有多深），改变【内容1】、【内容2】

<div class="cla1">
   <div class="cla2">
       <div class="cla3">
　　　　　　　 内容1 
           <div class="cla3">
　　　　　　　　　  内容2 
           div>
       div>
   div>
div>
1
2
3
4
5
6
7
8
9
10

.cla1 .cla3 {
    width: 100%;
}
1
2
3

（2）标签与类的组合

<div class="cla1">
    <td>
        <h1>
　　　　　　 内容 
　　　　　h1>
    td>
div>
1
2
3
4
5
6
7

.cla1 h1 {
    width: 100%;
}
1
2
3

6、伪类选择器

伪类必须配合正常的类来使用，改变未访问的链接【内容】

<a> 内容 a>
1

a:link {
    color: #fff
}
1
2
3

二、SCSS的选择器

1、多（类）选择器

.cla1 {
    &.cla2.cla3 {
        width: 100%;
    }
}
.cla1.cla2.cla3 {
    width: 100%;
}
1
2
3
4
5
6
7
8

2、群组选择器

.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}
.cla1, .cla2, .cla3 {
    width: 100%;
}
1
2
3
4
5
6
7
8

3、相邻选择器

.cla1 {
    & + .cla2 {
        width: 100%;
    }
}
.cla1 + .cla2 {
    width: 100%;
}
1
2
3
4
5
6
7
8

4、子代（类）选择器

.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据自己实际需要）
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}
.cla1>.cla2>.cla3 {
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、后代（类）选择器

.cla1 {
    .cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据自己实际需要）
.cla3 {
    .cla1 & {
        width: 100%;
    }
}
.cla1 .cla3 {
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6、伪类选择器

a {
    &:link {
        color: #ffffff;
    }
}
a:link {
    color: #ffffff;
}
1
2
3
4
5
6
7
8

7、自定义类（BEM）的选择

//以前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}
.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

8、属性的选择

.cla1 {
    border: {
        width: 1px;
        style: soild;
        color: #ffffff;
    }
}
.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}
1
2
3
4
5
6
7
8
9
10
11
12