CSS 选择器总结与 ^ $ * + ~ ＞ 的区别

css3属性选择器

p[id^="one”]：表示p标签的id选择器中开头为one的就会命中。

P[id$="mmm”]：表示p标签的id选择器中结尾为mmm的就会命中。

P[id*=”ddd”]：表示p标签的id选择器中包含为ddd的就会命中。

子代选择器(>)：A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

兄弟选择器(+,~)：

p~ul选择器 p之后出现的所有ul。两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

 A+B表示HTML中紧随A的B元素；用一个结合符只能选择两个相邻兄弟中的第二个元素；

li+li{font-weight:bold;}

上边这个选择器只会把第二这及后边的li都变成粗体，但第一个列表项不收影响

: only-child选择器:父元素的唯一子元素，: first-child选择器:父元素第一个子元素，: last-child选择器:父元素最后一个子元素，: nth-child(n)选择器:父元素第n个子元素

: nth- last-child(n)选择器:父元素倒数第n个子元素，: nth-of-type(n)选择器:父元素第n个子元素,与类型无关

: nth-last-of-type(n)选择器:父元素倒数第n个子元素，与类型无关: empty选择器:选择没有子元素或者文本内容为空的所有元素。

:target选择器:用户单击超链接并且跳转到target元素后才起作用

伪元素选择器

: before选择器:

P:before选择器{ content:文字/url;css属性...]:插入的数据是在被选中p标签之前。

:after选择器:

P:after选择器{ content:文字/url;css属性...}:插入的数据是在被选中p标签之后。