一、复合选择器
选择器分为:
- 基础选择器
- 复合选择器
两种选择器的关系:复合选择器是对基础选择器的组合。
常用的复合选择器:后代选择器、子选择器、并集选择器、伪类选择器等。
1、后代选择器
定义:后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 {
样式声明
}
上述语法表示选择元素1里面的所有元素2(后代元素)。
ol li {样式声明} #选择ol里面的所有的li标签元素
- 元素1 和元素2 中间用空格隔开。
- 元素1 是父级,元素2 是子级, 最终选择的是元素2。
- 元素2 可以是儿子, 也可以是孙子等, 只要是元素1 的后代即可。
- 元素1 和元素2可以是任意基础选择器。
2、子选择器
定义:子元素选择器(子选择器)只能选择作为某一元素的最近一级子元素。简单理解就是选亲儿子元素。
语法:
元素1 >元素2 {
样式声明
}
例如:
div > p {样式声明} #选择 div 里面所有最近一级的 p 标签元素
- 元素1 和元素2 中间用 **大于号** 隔开。
- 元素1 是父级,元素2 是子级, 最终选择的是元素2。
- 元素2 必须是 亲儿子, 它的孙子、重孙之类的都不归它管。可以理解为为 亲儿子选择器。
3、并集选择器
定义:并集选择器可以选择多组标签,同时为他们定义相同的样式。
并集选择器是由各类选择器通过 逗号(英文)连接而成的,任何形式的选择器都可以组合成并集选择器。
语法:
元素1 ,元素2 {
样式声明
}
例如:
ul, div {
样式声明
}
- 元素1 和元素2 中间用 逗号(英文)隔开。
- 逗号可以理解为“和”
- 并集选择器通常用于集体声明
4、伪类选择器
4.1、伪类选择器之链接伪类
a : link /* 未被访问的链接 */
a : visited /* 所有已被访问的链接 */
a : hover /* 鼠标指针位于其上的链接 */
a : active /* 活动链接(鼠标按下未弹起的链接)*/
- 为了确保生效(按顺序写)::link, :visited, :hover, :active
- 因为a 链接在浏览器中具有默认样式,所以我们实际开发中都需要给链接单独设置样式。
4.2、 伪类选择器之focus伪类
作用:用于选取获得焦点的表单元素。
聚焦光标,一般用于表单元素,例如<input>类表单元素。
二、元素显示模式
定义:
元素显示模式就是元素(标签)以什么方式进行显示。
作用:
了解标签的特点可以让我们在合适的地方用合适的标签。
1、块级元素
常见块级元素 <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>等,其中<div>标签是最典型的块元素。
特点:
- 独占一行。
- 高度、宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器,里面可以放行内或者块级元素。
2、行内元素
常见行内元素<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>。<span> 标签是最典型的行内元素。
特点:
- 一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:
特殊情况链接 <a> 里面可以放块级元素(但链接里面不能再放链接),为保证安全,可以转换<a>标签的显示模式。
3、行内块元素
常见行内块元素<img />、<input />、<td>
特点:
- 兼具块元素和行内元素的特点。
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
- 一行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
4、元素显示模式转换
- 转换为块元素:display:block;
- 转换为行内元素:display:inline;
- 转换为行内块:display: inline-block;
三、Emment语法
Emmet语法使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
1、快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 <div></div>
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的, 可以用 自增符号 $, 比如 .类名$*3可以快速生成有顺序的类名
- 如果想要在生成的标签内部写内容可以用 { } 表示
2、快速生成CSS样式语法
CSS 基本采取简写形式即可
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px;
- 比如bgc#000000 按tab 可以生成 background-color: #000000;
3、快速格式化代码
- Vscode 快速格式化代码: shift + alt+ f
- VSCode-->设置-->文本编辑器-->格式化-->format on save