一、样式优先级行内样式优先级高于内部、外部样式 内部样式和外部样式同级规则后来者居上 同一个样式内部优先级后面属性覆盖前面同名属性CSS 语法组成选择器 {声明块}书写规范代码空格书写规范合理留白CSS 注释/* 注释内容 */快捷键Ctrl/CSS 两种代码风格展开风格开发使用可读性高div { width: 100px; height: 100px; }紧凑风格项目上线使用压缩体积div{width:100px;height:100px;}webpack 工具可将展开风格自动转换为紧凑压缩风格二、基本选择器1. 通配选择器作用选择页面所有 HTML 元素 语法* { 属性名: 属性值; }示例* { margin: 0; padding: 0; }注意点无额外限制常用于全局初始化样式2. 元素选择器作用为页面同种标签统一设置样式 语法元素名 { 属性名: 属性值; }示例p { font-size: 14px; }注意点缺点是不能对同类型标签差异化设置样式3. 类选择器作用根据元素 class 属性值批量选中部分元素 语法.类名 { 属性名: 属性值; }HTML 示例div classbox red/divCSS 示例.box { width: 200px; } .red { background-color: red; }注意点类名尽量见名知意语义清晰一个元素 class 可写多个值多个类名用空格分开4. ID 选择器作用根据 id 属性值精确选中某一个元素 语法#id值 { 属性名: 属性值; }HTML 示例div idnav/divCSS 示例#nav { height: 50px; }注意点id 值推荐由数字、字母、下划线组成页面中同一个 id 值只能出现一次id 具有唯一性三、复合选择器1. 交集选择器作用选中同时满足多个选择器条件的元素 语法选择器1选择器2 { 属性名: 属性值; }示例div.item { line-height: 1.8; }注意点若包含元素选择器必须写在最前面不允许连续写两个元素选择器日常最常用组合元素选择器搭配类选择器开发中不建议搭配 ID 选择器使用2. 并集选择器作用一次性选中多个选择器匹配的所有元素 语法选择器1, 选择器2, 选择器n { 属性名: 属性值; }示例div, p, .title { color: #333; }注意点多个选择器中间用英文逗号隔开逻辑代表 “或”规范写法每个选择器单独占一行任意类型选择器都可以写在并集内四、基于 HTML 元素关系的层级选择器1. 后代选择器作用选中指定父元素内部所有符合要求的后代元素子、孙、重孙全部匹配 语法选择器1 选择器2 { 属性名: 属性值; }示例.list a { text-decoration: none; }注意点多个选择器之间用空格隔开不限层级深度2. 子代选择器作用只选中指定元素下符合要求的直接子元素仅亲儿子隔代无效 语法选择器1选择器2 { 属性名: 属性值; }示例.list li { margin: 5px 0; }注意点选择器之间用分隔只匹配一级子元素3. 兄弟选择器相邻兄弟选择器作用选中指定元素后方紧挨着的第一个同级兄弟元素 语法选择器1选择器2 { 属性名: 属性值; }示例h2 p { margin-top: 10px; }注意点仅匹配紧贴在后的那一个兄弟通用兄弟选择器作用选中指定元素后方所有符合条件的同级兄弟元素 语法选择器1~选择器2 { 属性名: 属性值; }示例h2 ~ p { color: #666; }兄弟选择器统一注意点两种兄弟选择器都只能向下选择无法向上匹配前面的兄弟元素五、属性选择器作用选中属性值满足对应规则的元素使用[]包裹属性规则1. [属性名]匹配拥有该属性的全部元素[title] { cursor: pointer; }注意点只要标签存在该属性就会被选中不限属性值2. [属性名 值]匹配拥有该属性且属性值和引号内内容完全相等的元素input[typepassword] { border: 1px solid #ccc; }注意点属性值必须完全一致才匹配区分大小写3. [属性名 ^值]匹配拥有该属性且属性值以引号内内容开头的元素[class^btn] { padding: 3px 10px; }注意点匹配属性值开头字符前缀一致即可生效4. [属性名 $值]匹配拥有该属性且属性值以引号内内容结尾的元素img[src$.jpg] { border-radius: 4px; }注意点匹配属性值末尾字符常用于匹配文件后缀5. [属性名 *值]匹配拥有该属性且属性值包含引号内内容的元素[class*tag] { background: pink; }属性选择器统一注意点引号可省略但带特殊字符、中文时建议加上双引号六、伪类选择器伪类---很像类但不是类是元素特殊状态的描述作用选中处于特殊状态的元素动态伪类:link 超链接未被访问的状态:visited 超链接访问过后的状态:hover 鼠标悬浮在元素上的状态:active 鼠标点击按住、元素激活的状态 示例a:link { color: #000; } a:visited { color: #999; } a:hover { color: #0099ff; } a:active { color: red; }动态伪类注意点书写顺序必须遵循 LVHAlink → visited → hover → active:focus 焦点伪类作用匹配获取输入焦点的元素 示例input:focus { outline: 2px solid #409eff; }:focus 注意点仅表单类元素 (input/select/textarea 等) 可以使用系统快捷键CtrlShiftDelete清空浏览器历史浏览数据、缓存WinV调出系统剪贴板历史记录作业!DOCTYPE html html langzh-CN head meta charsetUTF-8 title校园失物招领/title link relstylesheet hrefstyle.css /head body main h1校园失物招领/h1 img src./images/notebook.png alt校园失物招领 h2谁的笔记本/h2 p classbiaohao物品编号SW-016/p p捡到一本span蓝色笔记本/span封面上没有姓名。/p p classplace拾取地点操场看台/p p classtime拾取时间周三午休/p h2 物品特征/h2 ul li封面为蓝色没有姓名。/li li idwrite前几页写有课堂笔记。/li li 书中夹着一张白色标签。/li /ul h2认领须知/h2 ol li先核对物品特征再到值班室登记。/li li认领时请说明笔记本里的内容。/li li确认信息后签字领取物品。/li /ol div idtip温馨提示请勿代领避免拿错。/div p认领地点教学楼一楼值班室。/p /main /body /html/* 基础排版已提供可直接使用。这部分不作为考点。 margin 是外边距padding 是内边距不要求记忆或自行调整。 在本文件末尾添加你自己的选择器规则。 */ body { margin: 0; padding: 30px; background-color: whitesmoke; color: black; font-family: Microsoft YaHei, sans-serif; font-size: 18px; line-height: 1.8; } main { width: 600px; margin: 0 auto; padding: 30px; background-color: white; } h1 { margin: 0 0 20px; font-size: 32px; } h2 { margin: 20px 0 12px; font-size: 24px; } img { display: block; width: 600px; } p { margin: 12px 0; } ul, ol { margin: 12px 0; padding-left: 28px; } /* 在下面自行编写样式选择器和 class、id 名称由你决定。 */ h1, h2, span { color: blue; } [class] { color: grey; } #tip { color: red; } #writeli { color: green; }持续更新中~~