css样式

1. 样式来源

    1. 用户自定义样式：使用元素style属性设置的样式
    2. 用户代理样式：浏览器为该元素设置的默认样式
    3. 继承样式：可以继承浏览器默认样式（HTML和BODY默认样式），并非所有属性都能被继承，只有字体、颜色才能继承，盒模型、边框、边距没有继承意义。

2. 优先级

 自定义样式 > 继承样式 > 默认样式（用户代理样式）

3. 可以人工干预优先级

    影响某个元素样式的因素：
    1. 位置:后面定义的覆盖前面的
    2. 权重：

4. 样式类别

    1. 内联样式/行内样式：作用域 -> 仅限于当前HTML元素。
    2. 文档样式/内部样式：作用域 -> 仅限于当前HTML文档。
    3. 外部样式/公共样式：作用域 -> 凡是引用了该样式的文档。

5. 基本选择器

    1. 标签选择器：如H1,H2,P等。
        示例：<style>h1{color:red;}</style>
    2. 属性选择器 title/id/class。
        示例：
        <h2 title="php.cn老师">hello php.cn</h2>
        <h2 id="active">hello php.cn</h2>
        <h2 class="hello">hello php.cn</h2>
        <style>
            h2[title='php.cn老师']{color:green;}
            h2#active{color:violet;}
            h2.hello{color:blue;}
            //id和class是高频属性，CSS为它设计了语法糖，简写#和.
        </style>
    3. 群组选择器：多个选择器用“,”分开。
        示例：<style>h1,h2#active,h2.hello{}</style>

6. 上下文选择器

    1. 元素层级
        - 父子：ul , li
        - 后代：包括了父子，父子PLUS
        - 兄弟：同级
        - 所有：同级
    2. 前提：必须要有一个查询起点（参考物）
        /* 父子: >  */
        .list > .item {border:thin solid}
        /* 后代：空格 */
        .list .item3 {border:thin solid}
    3. 链式语法：将查询起点调整到指定元素
        语法：
        class="one two" => .one.two{}
        新起点 "+ *" 或 “~ * ”