一，子级选择器

书写方法：element1>element2

注意，element2必须是element1的直接子元素，否则不会被选中，所以它，他们必须是真父子关系；

二，兄弟选择器

兄弟选择器
element1+element2	相邻兄弟选择器，也就是说选中的只有e1后面紧跟着的一个e2元素会被选中
element1~element2	选中的有e1后面所有e2元素都会被选中，且不需要紧随

三，结构伪类选择器

选择器	简介
E：first-child	匹配父元素中的第一个子元素e
E：last-child	匹配父元素中的最后一个e元素
E：nth-child(n)	匹配父元素中的第n个子元素e
E：first-of-type	指定类型e的第一个
E：last-of-type	指定类型e的最后一个
E：nth-of-type（n）	指定类型e的第n个

1，nth-child(n)

这个伪类选择器的意思是选中父元素下面的某一个或某一些子元素

当我们写div :nth-child(2) {} 我们就可以选中div下面的第二个子元素被选中，如果我们写div p:nth-child(2) {}且div下的第二个子元素是p标签时我们就可以将其选中，如若不是我们就无法选中div下的第二个子元素，所以我们在实际应用中，一般是直接例如div :nth-child(2) {} 直接写要选中盒子的父级就可以了

n可以是数字，关键字也可以是公式

n:odd单数、even偶数、2n偶数、2n+1奇数、5n 5..10..15、n+5从第5个开始（包含第5个）到最后 5，6，7... 、 -n+5 前五个（包含第五个）5，4，3，2，1，0...

2，nth-of-type(n）

这个伪类选择器的意思是选中父元素下面的某一类子标签的某一个或某一些元素

它可以选择父元素下面的具体子元素，从而忽视掉其他没被我们选择的子元素；

也就是说例如我们写 div p:nth-of-type(2) {}的意思就是div下面的p标签的第二个p标签被选中

三，伪元素选择器

选择器	介绍
E::before	在E元素内部前面插入一个元素
E::after	在E元素内部后面插入一个元素
E::first-letter	选择到了E容器内的第一个字母
E::first-line	选择到了E容器内的第一行文本

浏览器对单冒号或者双冒号的伪元素选择器都能识别，双冒号是h5的语法规范；注意：伪元素只能给双标签添加不能给单标签添加，且伪元素冒号前不允许有空格！

伪元素里面必须写上属性content："";而且创建的这个伪类元素是属于行内元素

内墙法清除浮动就是用到::after的方法

四，属性选择器

选择器	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

利用标签里面有不同的属性和属性值去达到我们所要选中的效果；

div[class*="o"] {
            color: red;
        }