欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Emmet语法和CSS复合选择器

程序员文章站 2022-03-07 18:37:31
Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。1、快速生成HTML结构语法2、快速生成CSS样式语法3、快速格式化代码CSS的复合选择器复合选择器是建立在基础选择器之上的,对基础选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器(重要)...

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。
1、快速生成HTML结构语法
Emmet语法和CSS复合选择器
2、快速生成CSS样式语法
Emmet语法和CSS复合选择器
3、快速格式化代码
Emmet语法和CSS复合选择器

CSS的复合选择器

复合选择器是建立在基础选择器之上的,对基础选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素。
  • 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器(重要)
又称为包含选择器,可以选择父元素里面子元素。当标签发生嵌套时,内层标签就是外层标签的后代。
语法:
Emmet语法和CSS复合选择器

  • 后者是前者的后代元素。
  • 两元素之间一定用空格隔开。
  • 最终选择的是后者元素。
  • 后者可以是儿子也可以是孙子,只要是前者的后代即可。
  • 两元素可以是任意基础选择器。

子选择器(重要)
只能选择作为某元素的最近一级子元素。即选亲儿子元素。
Emmet语法和CSS复合选择器

  • 两元素中间用大于号隔开
  • 1是父级2是子级,最终选择的是2
  • 必须是亲儿子,其他不行。

并集选择器(重要)
可以选择多组标签,同时为他们定义相同的样式,用于集体声明。
Emmet语法和CSS复合选择器

  • 各选择器通过逗号连接而成
  • 任何形式的选择器都可以作为并集选择器的一部分。
  • 选择元素1和元素2
  • 通常用于集体说明
  • 最后一个选择器不加逗号

伪类选择器
向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
用冒号表示,比如:hover。

链接伪类选择器:
Emmet语法和CSS复合选择器
注意事项:
1、为了确保生效,按照LVHA的循顺序声明:link-:visited-:hover-:active。
2、记忆法 lovehate。
3、a链接在浏览器中有默认样式,所以实际工作中需要给链接单独指定样式。
实际开发中经常的写法:
Emmet语法和CSS复合选择器
focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器主要针对表单元素来说。
Emmet语法和CSS复合选择器
复合选择器总结
Emmet语法和CSS复合选择器

本文地址:https://blog.csdn.net/qq_49037451/article/details/107530839

相关标签: css