开发者学堂课程【移动 Web 前端开发：产品-优惠券-类型序选择器】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8468
产品-优惠券-类型序选择器
内容介绍：
一、优惠券框架
二、样式布局
一、案例实操
1. 优惠券框架
右边这一块只有一个百分之八和年利率，具有两行内容
在 index.html 中写入：
//第一个优惠券
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#">
<div class="box_right">
//这是第一行内容
<p><b>8</b><sub>%</sub>
//第二行内容
</p><p>年利率</p>
</ div>
<div class=”box_left”>
</div>
</a>
</div>
//第二个优惠券
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#">
<div class="box_right">
//这是第一行内容
<p><b>8</b><sub>%</sub>
//第二行内容
</p><p>年利率</p>
</ div>
<div class=”box_left”>
</div>
</a>
</div>
//第三个优惠券
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#">
<div class="box_right">
//这是第一行内容
<p><b>8</b><sub>%</sub>
//第二行内容
</p><p>年利率</p>
</ div>
<div class=”box_left”>
</div>
</a>
</div>
代码运行结果：
2. 样式布局
接下来做里面的样式布局：index.css
product_box .box_right{
width: 80px;
height: 100%;
float: right;
//添加集中显示
text-align: center;
}
//第一个p标签
.product_box .box_right p:first-child{
//改变颜色：红色字体
color: #e92322;
}
//第一个 p 标签中有两个元素，一个是 b 元素，一个是 sub 元素
//b 元素
.product_box .box_right p:first-child b{
//文字字号很大
font-size: 48px;
}
//sub 元素
.product_box .box_right p:first-child sub{
}
//另一个 p 元素下面没有其他元素
. product_box .box_right p: last-child{}
//Active 状态下都要变为白色：
.product_box.active .box_right p: last-child{
代码运行结果：
.product_box .box_right{
width: 80px;
height: 100%;
float: right;
//添加集中显示
text-align: center;
}
//第一个 p 标签
.product_box .box_right p:first-child{
//改变颜色：红色字体
color: #e92322;
//字下移
margin-top:25px;
}
//第一个 p 标签中有两个元素，一个是 b 元素，一个是 sub 元素
//b 元素
.product_box .box_right p:first-child b{
//文字字号很大
font-size: 48px;
}
//sub 元素
.product_box .box_right p:first-child sub{
//对齐
bottom: o;
}
//另一个 p 元素下面没有其他元素
. product_box .box_right p: last-child{}
//Active 状态下都要变为白色
.product_box.active .box_right p:first-child{
Color:#fff;
}
.product_box.active .box_right p:last-child{
Color:#fff;
}
.product_box.active .box_right p: last-child{
color:#fff;
代码运行结果：
但是，现在功能已描述出来，功能描述出来之后，需要添加类型序选择器
类型序选择器原理是：
先找到父元素，找到所有子元素，然后找第一个子元素，判断是不是 p，如果不是 p 就是无效。
在第二个p中添加一个<div>标签
//第二个优惠券
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#">
<div class="box_right">
<div></div>
//这是第一行内容
<p><b>8</b><sub>%</sub>
//第二行内容
</p><p>年利率</p>
</ div>
<div class=”box_left”>
</div>
</a>
</div>
代码运行结果：
第二个选择器出现问题失效，这样的情况会有很多，动态给 p 元素添加元素，遇到这种情况选择器不可以这样写，只有使用在 index.css 中添加一下参数
参数如下：
E:first-of-type 通过 E 找到父元素﹒然后找打父元素当中的所有的E类型的子元素﹑找到第一个
E:Last-of-type 找到最后一个
E:nth-of-type 找到第几个
E:nth-Last-of-type 倒数第几个
代码改进：
.product_box.active .box_right p:first-of-type{
color: #fff;
}
.product_box .box_right p:first-of-type{
color: #e92322;
margin-top: 25px;
}
. product_box .box_right p:first-of-type b{
font-size: 48px;
}
.product_box .box_right p:first-of-type sub{
bottom: o;
}
代码运行结果：
