这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
选择器
- 通配符选择器
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 状态伪类
- 结构性伪类
选择器的组合使用
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input.error |
| 后代组合 | A B | 如果B是A的子孙，则选中B | article p |
| 亲子组合 | A>B | 如果B是A的子元素，则选中B | section > p |
| 兄弟选择器 | A~B | 如果B在A后且A和A同级，则选中B | h2 ~ p |
| 相邻选择器 | A+B | 如果B紧跟A后，则选中B | h2 + p |
例子：
选择器组：
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
关于字体font-family
在 CSS 中，可以使用 font-family 属性来指定字体，浏览器渲染文字时候会根据这个属性应用于元素。如果没有指定这个属性或者指定的字体不存在于客户的计算机上，则浏览器会使用默认字体。
<style>
.line {
font-family: 'Courier New', Courier, monospace;
}
</style>
通用字体族：
- Serif衬线体
- Sans-Serif无衬线体
- Cursive手写体
- Fantasy
- Monospace等宽字体
关于font-family的使用建议有：
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
Web Fonts（网络字体） 允许指定的字体文件被下载到本地。 这是一种非常有效的方式，这样字体就不受限于本地是否安装了字体，而且大部分浏览器都支持这种方式。
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
h1 {
font-family: myFont, Cursive;
}
line-height 上一行的底线与下一行的底线之间的距离就是行高 line-height的值除了指定为多少px，通过%的方式根据font-size计算出。
font的组合使用：font: style weight size/height family
h1 {
/* 斜体 粗细 大小/行高 字体族 */
font: bold 14px/1.7 Helvetica, sans-serif;
}
