---

谷歌浏览器设置字体小于 12px

• 通过transform 缩放函数可以使字体的可视样式缩小, 但是元素的大小不变, 需要设置元素的大小来使元素和字体占的盒子一样大

hello world
1
2
3
4
5
6
7
8

css选择前几个元素、后几个元素、奇/偶数 元素

// 选第3个(包括第三个)往后的
#id div:nth-child(n + 3) {
	background-color: red;
}

// 选前3个
#id div:nth-child(-n + 3) {
	background-color: red;
}

// 奇数元素
#id div:nth-child(2n+1) {
	background-color: red;
}

// 偶数元素
#id div:nth-child(2n) {
	background-color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

父 子级 相邻元素 选择器

• & : 父级选择器
• 这一段:

.parent {
  &.son1 {
    background-color: red;
  }
  .son2 {
    background-color: green; 
  }
}
1
2
3
4
5
6
7
8

• 相当于

parent.son1 { // 作用于同一标签(串联选择器)
   background-color: red; 
}
.parent .son2 { // 作用于不同标签(后代选择器)
  background-color: green; 
}
1
2
3
4
5
6

• 类似的使用符号的选择器:

.calss-a .calss-b 	// 后/子代选择器, 所有子代
.calss-a >.calss-b  // 后/子代选择器, 但只选取一代
.calss-a.calss-b 	// 串联选择器, 同代/级别,作用于同一标签
.calss-a + .calss-b // 相邻选择器, 两者相邻
.calss-a ~.calss-b  // 平级选择器, 两者父级需一致, 作用于同一标签 
'calss-a calss-b '>
1
2
3
4
5