CSS3 新增选择器

1、结构(位置)伪类选择器

① first-child :选取属于其父元素的首个子元素的指定选择器

② last-child :选取属于其父元素的最后一个子元素的指定选择器

③ nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型

④nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

   注：n 可以是数字、关键词或公式

2、属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

```css
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 选取class以font开头的标签 */
    color: pink;
}
div[class$=footer] { /*  class$=footer 选取class以footer结尾的标签 */
    color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  选取class包含tao的标签 */
    color: green;
}
```

```html
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
```

3、伪元素选择器

① E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

② E::first-line 文本第一行；

③ E::selection 可改变选中文本的样式；

```css
p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}
```

④ E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

```css
div::before {
  content:"开始";
}
div::after {
  content:"结束";
}
```

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出伪元素的结构无法审查

**注意**

伪元素::before和::after添加的内容默认是inline元素，这两个伪元素的`content`属性，表示伪元素的内容,设置：:before和：:after时必须设置其`content`属性，否则伪元素就不起作用。