CSS中的Emmet语法以及后代选择器的学习
【摘要】 Emmet语法如果使用熟练的话可以大大节省我们的开发时间.
1. Emmet语法
快速生成html结构以及快速生成CSS语法
- 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
- 如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
- 如果有父子级关系的标签,可以用>比如ul> li就可以了
- 如果有兄弟关系的标签,用+就可以了比如div+p
- 如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了
- 如果生成的div 类名是有顺序的，可以用自增符号$
- 如果想要在生成的标签内部写内容可以用{}示
2. 快速格式化文档
在vscode中可以随便书写网页内容，最后可以右键格式化文档来使整个网页内容变得整齐且符合书写规范
{
"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. 后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在 后面，中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。 语法:
元素1 元素2 {样式声明}上述语法表示选择元素1里面的所有元素2 (后代元素)。
例如:
ul li{样式声明}/*选择ul里面所有的li标签元素*/- 元素1 和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
- 元素1 和元素2可以是任意基础选择器
注意： 如果在元素一的位置遇到相同的标签，可以通过class或者id来进行区分，方便CSS的书写
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）