CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人

2、E[att=“val”]（选择具有att属性且属性值等于val的E元素)（重点掌握）

3、E[att^=“val”]（匹配具有att属性且值以val开头的E元素)

4、E[att$=“val”]（匹配具有att属性且值以val结尾的E元素)

5、E[att*=“val”]（匹配具有att属性且值中含有val的E元素)。

1、E[att]（选择具有att属性的E元素)

举个例子：相亲，已经确定女嘉宾使用value来选择，男嘉宾使用placeholder来选择，在此之前我们如果想要选择所有的女嘉宾，我们就只能给每个女嘉宾定义一个class类命，根据不同类命进行多次选择，但是现在我们可以通过属性选择器一次性选择所有女嘉宾了。

代码如下（示例）：

效果如下（示例）：

2、E[att=“val”]（选择具有att属性且属性值等于val的E元素)（重点掌握）

举个例子：选择盒子礼物，一个已知礼物是古力娜扎，另一个不告诉你是什么。是我做选择，我肯定希望一下子就选中已知的古力娜扎嘛，万一另一个是蜘蛛蜈蚣咋办对吧。

代码如下（示例）：

效果如下（示例）：

3、E[att^=“val”]（匹配具有att属性且值以val开头的E元素)

举个例子：我喜欢御姐型的女人，这么多人里面每个人的特点都不一样，我想要快速的选择出来并且和所有的御姐都认识一下，这时候就可以用到这个方法。

代码如下（示例）：

高圆圆

杨幂

娄艺潇

倪妮

小彩虹

宁静

效果如下（示例）：

4、E[att$=“val”]（匹配具有att属性且值以val结尾的E元素)

代码如下（示例）：

我是安其拉

我是哥斯拉

那我是谁？

效果如下（示例）：

二、结构伪类选择器

========================================================================

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

选择符及简介：

1、E ：first-child;(匹配父元素中的第一个子元素E)

2、E ：last-child;(匹配父元素中的最后一个子元素E)

3、E ：nth-child(n);(匹配父元素中的第n个子元素E)（n可以是数字，关键字和公式）（n可以是关键字：even偶数，odd奇数）(可以是公式，n从0开始计算：2n:偶数；2n+1：奇数；5n：5、10、15…;

n+5:从第五个开始到最后；-n+5：前5个包含第五个)；）

4、E ：first-of-type;(指定类型E的第一个)

5、E ：last-of-type;(指定类型E的最后一个)

6、E ：nth-of-type(n);(指定类型E的第n个)

下面又开始进入举例子的部分了：

1、E ：first-child;(匹配父元素中的第一个子元素E)

2、E ：last-child;(匹配父元素中的最后一个子元素E)

举例子：假设西游记成员要和复仇者联盟比赛拔河，现在进行选人环节，大家依次排成一排，开始选人了，我想要看孙悟空和绿巨人拔河，那么我们可以这样做。

代码如下（示例）：

• 孙悟空
• 唐僧
• 猪八戒
• 沙僧
• 黑寡妇
• 美国队长
• 蜘蛛侠
• 金刚狼
• 雷神
• 绿巨人

• 效果如下（示例）：

  

  3、E ：nth-child(n);(匹配父元素中的第n个子元素E)（n可以是数字，关键字和公式）（n可以是关键字：even偶数，odd奇数）(可以是公式，n从0开始计算：2n:偶数；2n+1：奇数；5n：5、10、15…;

  不举例子了，直接看代码看效果：

  第一个代码如下（示例）：
• 我是第1个孩子
• 我是第2个孩子
• 我是第3个孩子
• 我是第4个孩子
• 我是第5个孩子
• 我是第6个孩子
• 我是第7个孩子
• 我是第8个孩子

• 效果如下（示例）：

  

  第二个代码如下（示例）：
• 我是第1个孩子
• 我是第2个孩子
• 我是第3个孩子
• 我是第4个孩子
• 我是第5个孩子
• 我是第6个孩子
• 我是第7个孩子
• 我是第8个孩子

• 效果如下（示例）：

  

  第三个代码如下（示例）：
• 我是第1个孩子
• 我是第2个孩子
• 我是第3个孩子
• 我是第4个孩子
• 我是第5个孩子