CSS选择器和网页划分

CSS选择器和网页划分的部分知识，一下是我的笔记（不足之处还请各位小伙伴多多提出建议哦）
1.样式表的权重
内联样式表的权重最大！
内部和外部样式的权重，和书写的前后顺序有关！
（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相 同属性的样式，不同属性的样式会继续执行。）
关键字：
!important -> 当前声明具有最高权重！
语法：
background:red!important;

2.CSS的层叠性
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
3.网页布局：
先做上下排版
再做左右排版
从外往里

4.CSS选择符
含义：选择符就是给标签起名字。
1）：类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
div\p\em\i\b\strong…
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。

2）：id选择符 （具有唯一性）
    快捷键创建：div#elem + tab键 -> <div id="elem"></div>
    语法：
        起名字：        <标签 id="名称"></标签>
        用名字写样式：   #名称{ 属性:属性值 }
        
    特点：唯一性！在同一个页面里面，一个id名只能用一次。
    应用：来划分网页外围结构

3）: 类选择符(class选择符)
    语法:
        其名称:         <标签 class="名称1 名称2 名称3 名称4..."></标签>
        用类名写样式     .名称{属性:属性值;}
    特点:
        a:一个元素可以有多个类名,类名可以重复出现
        b:可以制定一类样式.

4）: 群组选择符
    语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
        选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
        eg :     #box,.con,h3,#wrap{ width:300px; }

5）: 包含选择符(子代选择器\后代选择符)    ( 通过父元素找子元素 )
    语法:
        父元素 子元素{ 属性:属性值; }
6）伪类选择器
    含义：CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
  主要这四个伪类是针对a（链接）标签的
   :link ：访问前的选择器 ( 只能加给a标签 )
   :visited ：访问过后的选择器( 只能加给a标签 )
   :hover  ：鼠标移入的选择器 ( 所有标签都能添加 )
   :active  ：鼠标按下的选择器 ( 所有标签都能添加 )
   注：
   a标签如果四个伪类都添加的话，那么是有顺序的 L V H A
   一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
   
7）：通配符
    *{  }
    * 选择页面中所有的元素！
    *{
        margin:0;    盒子外围间距清零
        padding:0;   盒子内部的距离清零
    }

注：起名规范：
    尽量小写字母开头。
    数组、字母、下划线、连字符的组合。
    不能使用关键字命名 （所有的标签和属性都属于关键字）
    命名尽量反应板块内容、或者反应结构(语义化)。
    可以是拼音，但是不能出现汉字和特殊字符。
常用起名方式：
    1：驼峰式命名法：
        newsLeft   newsRight
    2: 连字符命名：
        news-left   news-right   news-center
    3: 下划线命名：
        news_left   news_right   news_center