css_易忘点总结

---

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

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

<style>
	div {
		transform: scale(0.8);
		width: 10px;
		height: 10px;
	}
</style>
<div>hello world</div>

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;
}

父 子级 相邻元素 选择器

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

.parent {
  &.son1 {
    background-color: red;
  }
  .son2 {
    background-color: green; 
  }
}

• 相当于

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

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

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