css3学习

1. 选择器
   1. 基本选择器
      1. 通配符: *
      2. ID选择器: #id
      3. class选择器: .class
      4. 元素选择器: 元素名(body, h1等)
      5. 后代选择器: (紧贴(.c1.c2): 同一个元素, 空格(.c1 .c2): 后代元素)
      6. 分组选择器: ,(结合符)
   2. 子元素选择器: >
   3. 后面紧跟兄弟选择器: +, eg: .c+div
   4. 后面通用兄弟选择器: ~, eg:  .c~div
   5. 存在和值选择器:[name]
      1. [name='d1']: name的值等于d1
      2. [name~='d1']: 空格分开,列表中有一个: name='d1 d2 d3'
      3. 子串值选择器
         1. [attr|=val]: 属性以val或val-开头
         2. [attr^=val]: 属性值以val开头
         3. [attr$=val]: 属性值以val结尾 
         4. [attr*=val]: 属性值包含val 
   6. 伪类和伪元素选择器(html解析时至上到下渲染成一个dom树,该选择器不在dom树里,目的是表示节点的状态)
      1. 链接伪类:顺序lvha->link-visited-hover-active
         1. link: 正常链接       
         2. visited: 访问过的链接,只能修改color,border-color,background-color         
         3. target: 特殊元素,它的id是uri的片段标识,用其做选项卡
      2. 动态伪类
         1. hover: 鼠标进入
         2. active: 激活状态
      3. 表单相关伪类
         1. enabled: 输入框可用
         2. disabled: 输入框不可用
         3. checked: 选中
         4. focus: 获得焦点
      4. 结构性伪类
         1. index的值从1开始
         2. index的值可以为变量n(只能是n)
         3. index的值可以为even, odd
         4. li:nth-child(index): 第index个子元素,且是li类型
            1. first-child:第一个元素
            2. last-child:最后一个元素
            3. nth-last-child(index):第index个元素,从后面开始数
            4. only-child:是nth-child(idx)和nth-last-child(idx)的组合,中间元素
         5. nth-of-type(index): 第index个li类型的子元素
            1. first-of-type:第一个元素
            2. last-of-type:最后一个元素
            3. nth-last-of-type(index):第index个元素,从后面开始数
            4. only-of-type:是nth-of-type(idx)和nth-last-of-type(idx)的组合,中间元素
      5. 逻辑: a:not(:last-child)->不是最后一个元素
      6. 元素内的内容为空:div:empty->div里面连空格都没
      7. 伪元素,使用:或::,推荐使用::
         1. ::before->元素之前显示的东西,content
         2. ::after->元素之前显示的东西,content
         3. ::first-letter->第一个字符
         4. ::first-line->第一行
         5. ::selection->选中的内容
         6. :root->根元素,有些浏览器的根元素为html,有些浏览器的根元素为body
2.  层叠规则
   1. 来源
      1. 创作人员(开发者)
      2. 读者(用户)
      3. 用户代理(浏览器)
      4. 权重,从上到下优先级降低
         1. 读者的重要申明(用户在浏览器上申明css)
         2. 创作人员的重要申明
         3. 创作人员的正常申明
         4. 读者的正常申明
         5. 用户代理的申明(浏览器)
   2.  特殊性(特殊性大的优先)
      1. 申明的优先级,特殊性值用四个部分表示,如0,0,0,0
         1. ID: 0,1,0,0
         2. 类(伪类),属性: 0,0,1,0
         3. 元素(伪元素): 0,0,0,1
         4. ,通配符: 0,0,0,0
         5. 结合符(,),继承: 无
         6. 内联,html元素上的style属性:1,0,0,0
      2. 选择器冲突时值越大,越优先选择
      3. 例:div[id="test"](0001+0010=0,0,1,1)
      4. 重要申明: !important优先级大于非特殊申明,!important放在元素申明的最后,分号之前
   3. 申明顺序(下面覆盖上面)
3. 自定义字体图标
   1. 自定义字体:@font-face
   2.  
4. 注意
   1. css申明的优先级
   2. 属性的初始值,可继承性
   3. label中的内容和radio可以关联,用来制作自定义按钮
   4. 内联元素指定高宽使用float配合