CSS3选择器

CSS3选择

1、属性选择器（根据元素的属性及属性值来选择元素）
（1）E[att^=value]属性选择器：指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。
例如：

div[id^=one]

表示匹配包含id属性，且id属性值是以“one”字符串开头的div元素。
（2）E[att$=value]属性选择器：指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的字符串。与E[att^=value]属性选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
例如

div[id$=one]

表示匹配包含id属性，且id属性值是以“one”字符串结尾的div元素。
（3）E[att*=value]属性选择器：用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。
例如

div[id*=one]

表示匹配包含id属性，且id属性值包含“one”字符串的div元素。
2、关系选择器
（1）子元素选择器：用来选择某个元素的第一级元素。
例如：希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong
(2)相邻兄弟选择器（+、~）
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
①临近兄弟选择器：该选择器使用+来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
②普通兄弟选择器：使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个。
3、选择化伪类选择器
（1）:root选择器：用于匹配文档根标签，在HTML中，根标签始终是html。即使用该标签定义的样式对页面的所有标签都生效，对于不需要该样式的标签，可以单独样式设置样式进行覆盖。

:root{ };

（2）:not选择器：如果对某个标签使用样式，但是想排除这个结构元素下面的子结构元素，让子结构元素不使用这个样式，可以使用该选择器。

body*:not{ };

（3）:only-child选择器：用于匹配属于某元素的唯一元素，也就是说，如果某个父元素仅有一个子元素，则使用该选择器。

标签名:only-child{ }

(4):first-child和:last-child选择器分别用于选择父元素中的第一个和最后一个元素。

标签名:first-child{  }

标签名:last-child{   }

（5）：nth-child(n)选择器：可以选择父元素中正数任意一行
：nth-last-child(n)选择器：可以选择父元素中倒数任意一行

标签名：nth-child(n){   }

（6）：nth-of-type(n)和：nth-last-of-type(n)选择器：用于匹配属于父类元素的特定类型的第n个子元素和倒数第n个子元素。

标签名：：nth-of-type(n){   }

（7）：empty选择器：用来选择没有子元素或者文本内容为空的所有元素，

:empty{  }

4、伪元素选择器
（1）:before伪元素选择器：用于在被选元素的内容前插入元素，必须配合content属性来指定要插入的具体内容

<元素>：before{
   content：文字/url();
}

（2）：after伪元素选择器：用于在某个元素之后插入一些内容，使用方法与：before相同

<元素>：after{
   content：文字/url();
}

注意： ：before也可以写成：：before