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