CSS的学习及使用
1. Emmet语法
快速生成html结构以及快速生成CSS语法
2. 快速格式化文档
在vscode中可以随便书写网页内容，最后可以右键格式化文档来使整个网页内容变得整齐且符合书写规范
此处为所设置的json文档：
{ "code-runner.defaultLanguage": "javascript", "workbench.colorTheme": "Ayu Mirage", "files.autoSave": "afterDelay", "liveServer.settings.donotShowInfoMsg": true, "open-in-browser.default": "Google Chrome", "emmet.excludeLanguages": [ "markdown" ], "editor.formatOnSave": true, "editor.formatOnType": true }
3. 复合选择器
3.1 后代选择器
注意： 如果在元素一的位置遇到相同的标签，可以通过class或者id来进行区分，方便CSS的书写
3.2 子类选择器（简而言之就是只针对下一级）
3.3 并集选择器
并集选择器竖着写（格式化要求）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之并集选择器</title> <style> /* 要求1: 请把熊大和熊二改为粉色 */ /* div, p { color: pink; } */ /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */ div, p, .pig li { color: pink; } /* 约定的语法规范,我们并集选择器喜欢竖着写 */ /* 一定要注意,最后一个选择器 不需要加逗号 */ </style> </head> <body> <div>熊大</div> <p>熊二</p> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <li>猪爸爸</li> <li>猪妈妈</li> </ul> </body> </html>
