前端开发课程
- CSS权重
  - 权重的等级
  - 权重的计算实例

```
              [
```

                    课程介绍
                ](_index_)

```
              [
```

                    html和css入门
                ](001day_index)
        - 
                [
                    html概述及基本结构
                ](001day_section02)

```
              [
```

                    html标签入门
                ](001day_section03)

```
              [
```

                    html布局入门
                ](001day_section04)

```
              [
```

                    css介绍
                ](001day_section05)

```
              [
```

                    css载入方式
                ](001day_section06)

```
              [
```

                    css选择器一
                ](001day_section07)

```
              [
```

                    css元素属性及盒子模型
                ](001day_section08)

```
              [
```

                    css文本属性
                ](001day_section09)

```
              [
```

                    css基本布局演示
                ](001day_section10)

```
              [
```

                    html和css进阶
                ](002day_index)
        - 
                [
                    相对地址与绝对地址
                ](002day_section01)

```
              [
```

                    列表
                ](002day_section02)

```
              [
```

                    表单
                ](002day_section03)

```
              [
```

                    表格
                ](002day_section04)

```
              [
```

                    css选择器二
                ](002day_section05)

```
              [
```

                    css显示特性
                ](002day_section06)

```
              [
```

                    css元素溢出
                ](002day_section07)

```
              [
```

                    html和css高级
                ](003day_index)
        - 
                [
                    定位
                ](003day_section01)

```
              [
```

                    css权重
                ](003day_section02)

```
              [
```

                    photoshop辅助测量与取色
                ](003day_section03)

```
              [
```

                    前端页面开发流程
                ](003day_section04)

```
              [
```

                    javascript入门及进阶
                ](004day_index)
        - 
                [
                    JavaScript介绍
                ](004day_section01)

```
              [
```

                    JavaScript嵌入页面的方式
                ](004day_section02)

```
              [
```

                    变量、数据类型及基本语法规范
                ](004day_section03)

```
              [
```

                    函数
                ](004day_section04)

```
              [
```

                    获取元素方法
                ](004day_section05)

```
              [
```

                    操作元素
                ](004day_section06)

```
              [
```

                    事件属性及匿名函数
                ](004day_section07)

```
              [
```

                    条件语句
                ](004day_section08)

```
              [
```

                    javascript高级
                ](005day_index)
        - 
                [
                    数组及操作方法
                ](005day_section01)

```
              [
```

                    循环语句
                ](005day_section02)

```
              [
```

                    字符串及操作方法
                ](005day_section03)

```
              [
```

                    定时器
                ](005day_section04)

```
              [
```

                    调试程序的方法
                ](005day_section05)

```
              [
```

                    变量作用域
                ](005day_section06)

```
              [
```

                    封闭函数
                ](005day_section07)

```
              [
```

                    JQuery入门
                ](006day_index)
        - 
                [
                    jquery介绍
                ](006day_section01)

```
              [
```

                    jquery文档加载完再执行
                ](006day_section02)

```
              [
```

                    jquery选择器
                ](006day_section03)

```
              [
```

                    jquery样式操作
                ](006day_section04)

```
              [
```

                    绑定click事件
                ](006day_section05)

```
              [
```

                    jquery动画
                ](006day_section06)

```
              [
```

                    JQuery进阶
                ](007day_index)
        - 
                [
                    jquery特殊效果
                ](007day_section01)

```
              [
```

                    jquery链式调用
                ](007day_section02)

```
              [
```

                    jquery属性操作
                ](007day_section03)

```
              [
```

                    jquery事件
                ](007day_section04)

```
              [
```

                    表单验证
                ](007day_section05)

```
              [
```

                    JQuery高级
                ](008day_index)
        - 
                [
                    事件冒泡
                ](008day_section01)

```
              [
```

                    事件委托
                ](008day_section02)

```
              [
```

                    Dom操作
                ](008day_section03)

```
              [
```

                    javascript对象
                ](008day_section04)

```
              [
```

                    json
                ](008day_section05)

```
              [
```

                    ajax
                ](008day_section06)

```
              [
```

                    ES6语法
                ](009day_index)
        - 
                [
                    变量声明和赋值
                ](009day_section01)

```
              [
```

                    函数相关
                ](009day_section02)

```
              [
```

                    模块及面向对象
                ](009day_section03)

```
              [
```

                    异步请求数据
                ](009day_section04)

```
              [
```

                    新增数组操作方法
                ](009day_section05)

```
              [
```

                    react入门和进阶
                ](010day_index)
        - 
                [
                    react介绍
                ](010day_section01)

```
              [
```

                    快速开始
                ](010day_section02)

```
              [
```

                    JSX语法
                ](010day_section03)

```
              [
```

                    组件和属性(props)
                ](010day_section04)

```
              [
```

                    绑定事件
                ](010day_section05)

```
              [
```

                    状态(state)
                ](010day_section06)

```
              [
```

                    列表渲染
                ](010day_section07)

```
              [
```

                    表单数据绑定
                ](010day_section08)

```
              [
```

                    react高级
                ](011day_index)
        - 
                [
                    生命周期方法
                ](011day_section01)

```
              [
```

                    数据交互
                ](011day_section02)

```
              [
```

                    脚手架开发
                ](011day_section03)

          [
              本書使用 GitBook 釋出
          ](https://www.gitbook.com)

前端开发课程

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重1、内联样式，如：style=””，权重值为10002、ID选择器，如：#content，权重值为1003、类，伪类，如：.content、:hover 权重值为104、标签选择器，如：div、p 权重值为1

权重的计算实例

1、实例一：

<style type="text/css">
    div{
        color:red;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，
所以文字的最终颜色为blue 
-->

2、实例二：

<style type="text/css">
    body #content .main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 1+100+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->