三种序列选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一子元素选择器</title><style type="text/css"> h3:first-child{/*解释：h3:first-child：选择的是h3元素的父元素（父元素即是<body>元素）,h3是<body>中第一个子元素,必须同时满足两种条件才能选中*/color: red;}</style></head><body><h3>我爱学习1</h3><h3>我爱学习2</h3><p>我爱学习3</p><p>我爱学习4</p><div>我爱学习5</div><div>我爱学习6</div></body>
</html>满足第一子元素选择器的2个条件
- 选择的是h3元素的父元素（父元素即是元素）
- h3是< body>中第一个子元素,必须同时满足两种条件才能选中*/
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*最后子元素选择器:*/div:last-child{/*选择的是div元素的父元素中,是div的最后一个子元素,必须同时满足两种条件才能选中*/color: blue;}/*序列选择器一般用在列表中*/</style></head><body><h3>我爱学习1</h3><h3>我爱学习2</h3><p>我爱学习3</p><p>我爱学习4</p><div>我爱学习5</div><div>我爱学习6</div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*第一子元素选择器:*/h3:first-child{/*选择的是h3元素的父元素（即是<body>元素）中,是h3的第一个子元素,必须同时满足两种条件才能选中*/color: red;}/*最后子元素选择器:*/div:last-child{/*选择的是div元素的父元素中,是div的最后一个子元素,必须同时满足两种条件才能选中*/color: blue;}/*序列选择器一般用在列表中*/</style></head><body><h3>我爱学习1</h3><h3>我爱学习2</h3><p>我爱学习3</p><p>我爱学习4</p><div>我爱学习5</div><div>我爱学习6</div></body>
</html>
