前言
本书由张鑫旭老师著,阅后梳理。
第1章 概述
CSS选择器能够做的事情远比你预想的多得多。
选择器、选择符、伪类和伪元素
1、选择器
/*body就是一种选择器,是类型选择器,也可以称为标签选择器*/
body { font: menu; }
/*.container也是选择器,属于属性选择器的一种,我们平时称其为类选择器*/
.container { background-color: olive; }
2、选择符(5个)
- 表示后代关系的空格( )
- 表示父子关系的尖括号(>)
- 表示相邻兄弟关系的加号(+)
- 表示兄弟关系的弯弯(~)
- 表示列关系的双管道(||)
/*后代关系*/
.container img { object-fit: cover; }
/*父子关系*/
ol > li { margin: .5em 0; }
/*相邻兄弟关系*/
button + button { margin-left: 10px; }
/*兄弟关系*/
button ~ button {margin-left: 10px; }
/* 列 */
.col || td { background-color: skyblue; }