第6章 级联样式单与CSS选择器
6.1 样式单概述
6.2 CSS样式单的基本使用
(1) 链接外部样式文件(<link href="*.css" rel="stylesheet">)
(2) 导入外部样式文件[css文件或style标签中](@import "*.css";)
(3) 使用内部CSS样式(style元素放在head元素内)
(4) 使用内联样式(元素内属性style="...")
6.3 CSS选择器(E是有效的HTML元素,Selector指属性、ID、class选择器之一)
(1) 元素选择器( E{属性:属性值;...} )
(2) 属性选择器( E[属性=值]{属性:属性值;... } )
(3) ID选择器( #id值{属性:属性值;... } )
(4) 类选择器( .class值{属性:属性值;... } )
(5) 包含选择器(Selector1 Selector2{属性:属性值;... } )
(6) 子选择器(Selector1>Selector2{属性:属性值;... } )
(7) 兄弟选择器(Selector1~Selector2{属性:属性值;... } )
(8) ID元素选择器( E#id值{属性:属性值;... })
(9) 选择器组合
6.4 伪元素选择器
(1) 首字母选择器(first-letter)
(2) 首行选择器(first-line)
(3) :before和content属性结合：之前插入文字
(4) :after和content属性结合：之后插入图像
(5) .类名:after和content属性结合：之后插入图像(只插入部分元素)
(6) 配合quotes属性执行插入
(7) 添加编号
(8) 使用自定义编号
(9) 添加多级编号
6.5 CSS 3.0新增的伪类选择器
(1) :root伪选择器
不使用:root伪选择器
(2) child伪选择器(:first-child、:last-child、:nth-child、:nth-last-child、:only-child)
(2) 调用checkValidity方法进行校验
(3) 自定义错误提示
(4) 使用校验属性执行校验
(5) 调用checkValidity方法进行校验
(6) 调用checkValidity方法进行校验
(8) 调用checkValidity方法进行校验
(9) 自定义错误提示
(10) 使用校验属性执行校验
(11) 调用checkValidity方法进行校验
(12) 自定义错误提示
(13) 使用校验属性执行校验
6.6 在脚本中修改显示样式
(1) 使用校验属性执行校验
(2) 调用checkValidity方法进行校验
返回目录