选择器

新增选择器：

选择器例子描述element>elementdiv>p选择 的 子元素

element+elementdiv+p选择在 元素之后的相邻的

元素

element~elementdiv~p选择在 元素之后的所有

元素

属性伪类：

选择器例子描述[attribute][target]选择带有 target 属性所有元素[attribute=value]a[target=_back]选择 target="_blank" 的所有元素[attribute~=value][title~=main]选择 title 属性包含单词 “flower” 的所有元素[attribute^=value]a[class^=“test”]选择其 a属性值以 “test” 开头的每个 元素[attribute$=value]a[class$=“text”]选择其 a属性以 “text” 结尾的所有 元素[attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 元素:focusinput:focus选择获得焦点的 input 元素

结构伪类：

选择器例子描述:first-letterp:first-letter选择每个

元素的首字母

:first-linep:first-line选择每个

元素的首行

:first-childp:first-child选择属于父元素的第一个子元素的每个

元素

:first-of-typep:first-of-type选择属于其父元素的首个

元素的每个

元素

:last-of-typep:last-of-type选择属于其父元素的最后

元素的每个

元素

:only-of-typep:only-of-type选择属于其父元素唯一的

元素的每个

元素

:only-childp:only-child选择属于其父元素的唯一子元素的每个

元素

:nth-child(n)p:nth-child(2 )选择属于其父元素的最后

元素的每个

元素

:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数:only-childp:only-child选择属于其父元素的唯一子元素的每个

元素

:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个

元素的每个

元素

:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数:last-childp:last-child选择属于其父元素最后一个子元素每个

元素

比较：nth-child与nth-of-type的区别？

前者不指定类型，后者指定类型

其它：

选择器例子描述:targetp:target目标选择器，跟锚点链接一起使用

伪元素：

选择器例子描述:beforep:before在每个

元素的内容之前插入内容

:afterp:after在每个

元素的内容之后插入内容