css3选择器概念及写法大全

:root 选择器匹配文档根元素。 在 HTML 中，根元素始终是 html 元素。

如果想对某个结构元素使用样式，但是又想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

使用empty选择器来指定当前元素中内容为空白时使用的样式。比如，有一个表格，可以使用empty选择器来指定当表格中某个单元格内容为空时，该单元格背景为灰色。

标签的背景颜色 p:empty { background:pink; } 4. target【不兼容IE8 及更早的版本】

使用target选择器 来对页面中某个target元素（该元素的id被当做页面中的超链接来使用，也就是锚链接）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

接下来看一组实例： 小伙伴儿们可以复制以下代码到自己编辑器里查看效果哦！

跳转至文本 1

跳转至文本 2

请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚链接。

文本 1...

文本 2...

注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。

target 实例效果图：

所有主流浏览器都支持：first-child 选择器。 但是对于IE8 及更早版本的浏览器中使用 ：first-child,必须声明 。

选择每个 < p > 中的每个 < i > 元素并设置其样式，其中的 < p > 元素是其父元素的第一个子元素：

选择列表中的第一个 < li > 元素并设置其样式：

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 p:last-child 等同于 p:nth-last-child(1)。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。 n 可以是数字、关键词或公式。

:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。