简单选择器
classs选择器
- 用（.）来标记 文档中的个元素可以具有相同的类名，而单个元素可以用多个类名（之间用空格隔开）。
id选择器
通用选择
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{ margin: 0 auto; font-size: 14px; } /* 通用选择器页面中所有的元素 */ #box { width: 200px; height:200px; background: cornflowerblue; } /* 标记页面中唯一的元素 */ .box_text { text-align: center; line-height: 200px; font-size: 2rem; color: cornsilk; } /* 页面中元素可以相同的类名 */</style><body> <div id="box"> <div class="box_text">简单选择器</div> </div></body></html>
上下文选择器
1. 后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素。
- 语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔
格式: 祖先 目标 {样式声明}
2. 子选择器:先找到父级元素,再选择他下面所有直接后代元素。
- 语法: 父级与目标直接用 > 分开 。
格式: 父级 > 目标元素 {样式声明}
3. 相邻选择器: 先确定同胞元素的起始点,选择后面的所有的指定元素。
- 语法: 相邻元素的起始点用+号连接。
格式: 元素本身 + 相邻元素 {样式声明}
4. 同级所有选择器: 同级共享指定元素。
- 语法: 同级相同的所有元素 ~ 号连接。
格式: 元素本身 ~ 同级元素 {样式声明}
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .box { width: 330px; height: 330px; margin: 0 auto; } .item { border: 1px solid darkblue; width: 100px; height: 100px; float: left; margin: 4px; font-size: 2rem; text-align: center; line-height: 100px; } .box div { background: coral; } /* 后代选择器：空格 */ body > div { background: blueviolet; } /* 父子选择器：> */ .item.center { background: thistle; } .item.center + .item { font-size: 3rem; color: thistle; } /* 相邻选择器: + */ .item.center ~ .item { width: 45px; height: 45px; float: left; border: 1px solid teal; font-size: 1rem; line-height: 40px; color: white; margin: 2px; } /* 同级下所有选择器：~ */</style><body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div></body></html>
