1. Emmet 语法
- 快速生成 HTML 结构代码
- 快速生成 CSS 样式代码
- vs2019的同学们,要在扩展里面下载zen coding 才能使用emmet语法哦
2. 复合选择器
由基础选择器组合而成。
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
2.1 后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里的子元素。写法是将外层标签写在前面,内层标签写在后面,中间空格分开。
语法
元素1 元素2 { 样式声明; }
- 上述语法表示选择元素 1 里面所有的元素 2
- 可以连续嵌套,比如可以是孙子等
- 元素 1、2 可以是任何基础标签
2.2 子选择器(重要)
子元素选择器(子选择器)只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。
语法
元素1 > 元素2 { 样式声明; }
- 元素之间用大于号 > 隔开
- 1 为父级。二为子级,最终选择的是元素 2
- 元素 2 必须是亲儿子。
2.3 并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号 , 连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法
元素1,
元素2 { 样式声明; }
2.4 伪啛类选择器
伪类选择器用于向某些选择器添加特殊的效果。 伪类选择器书写最大特点是用冒号 : 表示。 伪类选择器种类多,比如链接伪类选择器、结构选择器等。
2.4.1 链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意事项
- 确保样式生效,要按照 LVHA 的顺序声明:link,visited,hover, active。
即,按顺序书写
- a 链接在浏览器中有默认样式,所以实际开发都需要给链接单独指定样式。
开发中实际写法
a {
color: gray;
text-decoration: none;}
a:hover {
color: #369;
text-decoration: underline;}
2.4.2 focus 伪类选择器
:focus 伪类选择器用于获取焦点的表单元素。 焦点就是光标,一般情况 <input> 类表单元素才能获取,因此这个选择器也主要针对表单元素来说。
input:focus {
background-color: yellow