基础知识

字重

font-weight: 100 ~ 900 整百（400=normal，700=bold）

移动端定义字体的代码

.class {
  font: 12px;
  line-height: 1.4;
}
/*来自---https://juejin.cn/post/6884472519055654925 吻合蓝湖设计稿*/

选择器

属性选择器

属性选择器就是在所有标签上 只要有这个属性的就被选择中！

[title] {
  color: blue;
}

a[class^=xxg]  //a标签里 类属性 开头带有xxg
a[herf$=xxg]   //a标签里 herf属性 结尾有xxg
a[title*=xxg]  //a标签里 title属性 包含了xxg

a[class^=xxg] {
  color: blue;
}

CSS3 伪类选择器

伪类选择器	说明
a:root	伪类选择器 等同于选择 html
a:not	否定选择器 就是不选择这个
a:empty	选择没有任何内容的容器
a:target	目标选择器 用来匹配页面 url 的某个标志符的目标元素
a:first-child	第一个子元素
a:last-child	最后一个子元素
a:nth-child(n)	n=odd 或者 even,也可以是数字
a:nth-last-child(n)	从最后一个子元素开始计算
a:first-of-type	指定	第一个这个类型的元素,而不是第一个元素
a:last-of-type	指定	最后一个这个类型的元素
a:nth-of-type(n)	指定	这个类型的的元素的选择
a:nth-last-of-type(n)	[...]
a:only-child	选的这个元素他 有且只有一个子元素
a:only-of-type	选择这个元素下 他的唯一类型的子元素

• demo:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素；
• demo:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，从最后一个子元素开始计数；
• demo:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

nth-child n的使用方法

1. :nth-child(1) 选择第一个子元素
2. :nth-child(-n+2) 选择前两个子元素
3. :nth-child(n+2) 选择后两个子元素
4. :nth-child(2n) 选择列表中为偶数的元素===even
5. :nth-child(2n-1) 选择列表中为奇数的元素===odd
6. :nth-child(n+6):nth-child(-n+9) 结合使用，选择一列元素中的中间几个

注意

n 和 js 中 index 一样从 0 开始

margin 和 padding 的使用场景

• 需要在 border 外侧添加空白，且空白处不需要背景（色）时，使用 margin；
• 需要在 border 内测添加空白，且空白处需要背景（色）时，使用 padding。

link 和@import 的区别

• link 引用 CSS 时，在页面载入时同时加载
• @import 需要页面网页完全载入以后加载