CSS选择器——层次选择器，结构伪类选择器，属性选择器

Our greatest enemies are within.
我们最大的敌人就是我们的内心。

        在之前的文章里已经介绍过基本选择器，高级选择器一般上包括层次选择器，结构伪类选择器，属性选择器，接下来为大家11介绍。

一、层次选择器

• 1.后代选择器
  后代选择器可以选择作为某元素后代的元素。
  格式：A B

div span { 
background-color: red;
}

<!-- 选择属于div后代的span元素都会被加上红色背景 -->
<div>
<p>
<span>我是div的后代元素1</span>
<span>我是div的后代元素2</span>
</p>
</div>

• 子选择器
  与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
  格式：A>B

div>span {
background-color: red;
}

<!--选择只有div的孩子元素才会被加上红色背景 -->
<div>
<span>我是div的子元素1</span>
<span>我是div的子元素2</span>
<p>
<span>我是div的后代元素</span>
</p>
</div>

• 相邻兄弟选择器
  相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
  格式：A+B

span+p {
background-color: red;
}

<!--选择与span标签之后紧邻且同时拥有同一个父元素的元素才会被加上红色背景 -->
<div>
<span>我是div的子元素</span>
<p>
我是span的兄弟元素
</p>
</div>

• 通用兄弟选择器
  兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
  格式：A~B

span~p {
background-color: red;
}

<!--选择span标签之后与span拥有同一父级的元素才会被加上红色背景 -->
<div>
<p>我是span的兄弟元素p1</p>
<span>我是div的子元素</span>
<p>我是span的兄弟元素p2</p>
<p>我是span的兄弟元素p3</p>
</div>

二、结构伪类选择器

• A:first-child 作为父元素的第一个子元素的元素A
• A:last-child 作为父元素的最后 一个子元素的元素A

p:first-child {
background-color: red;
}
p:last-child {
background-color: green;
}

<div>
<p>我是第一个p元素背景色为红色</p>
<p>我是第二个p元素</p>
<p>我是最后一个p元素背景色为绿色</p>
</div>

• A B:nth-child(n) 选择父级元素A的第n个子元素B，（n可以是1、2、3），关键字为even(偶数)、odd(奇数)

 div p:nth-child(odd) {
 background-color: red;
 }

<!-- 选择父级元素div的第n（n为奇数）个子元素p -->
<div>
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
<p>我是第四个p元素</p>
</div>

• A:first-of-type 选择父元素内具有指定类型的第一个A元素
• A:last-of-type 选择父元素内具有指定类型的最后一个A元素
• A:B:nth-of-type(n) 选择父元素内具有指定类型的第n个B元素

 /* 第一个 */
 p:first-of-type{
 background-color: greenyellow;
 }
 /* 最后一个 */
 p:last-of-type{
 background-color: yellow;
 }
 /* 第二个 */
 div p:nth-of-type(2) {
 background-color: red;
 }

<div>
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
<p>我是第四个p元素</p>
</div>

三、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

• 选择匹配具有属性attr的E元素
  格式：E[attr]
  例如：当图片无法显示时的替代文字变为红色

img[alt] {
color: red;
}

<img src="../timg.png" alt="我是图片">

• 选择匹配具有属性attr的E元素，并且属性值为val
  格式：E[attr=val]
  例如：当图片无法显示时的替代文字“我是图片2”变为红色

 img[alt=我是图片2] {
 color: red;
 }

<img src="../timg1.png" alt="我是图片1">
<img src="../timg2.png" alt="我是图片2">

• 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
  格式：E[attr^=val]
  例如：这里匹配到了元素img的属性alt且属性值以“我是图片”开头的字体设置为红色

img[alt^=我是图片] {
color: red;
}

<img src="../timg1.png" alt="我是图片1">
<img src="../timg2.png" alt="我是图片2">
<img src="../timg3.png" alt="图片3">

• 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
  格式：E[attr$=val]
  例如：这里匹配到了元素img的属性alt且属性值以“图片”结尾的字体设置为红色

img[alt$=图片] {
color: red;
}

<img src="../timg1.png" alt="我是图片1">
<img src="../timg2.png" alt="我是图片2">
<img src="../timg3.png" alt="我是图片">

• 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
  格式：E[attr*=val]
  例如：这里匹配到了元素img的属性alt且属性值里有“图片”的字体设置为红色

img[alt*=图片] {
color: red;
}

 <img src="../timg1.png" alt="我是图片1">
 <img src="../timg2.png" alt="我是图片2">
 <img src="../timg3.png" alt="我是图片">

ENDING…