1 aaaaaaaaaaaaaaaa2 aaaaaaaaaaa

1 h4 {2   color:red;  3   font-size:14px;4 }

View Code

h4~p   h4后面的p标签 

h4+p   h4相邻的p标签

p[id]   包含id属性的p标签

p[class~="b"]  class类名为b且b前面有空格的p标签

p[class|="b"]  class类名为b且b后面有横杠的p标签

a[href^="http"] a标签下的href以http开头

a[href$="rar"] a标签下的href以rar结尾

a[href*="o"] a标签下的href有o

p::first-line  选择p标签下第一行

a:before（a::before），a:after（a::after） 伪元素

p::selection  选择被选中的文字

p::first-letter 选择p标签下第一个字

div:not(#container) 选择除id为container之外的所有div标签

p:first-child  找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。）

p:first-of-type 找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是该类型的第一个，这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。）

p:last-child  找到P 然后找P的父级 再找父级下最后一个元素是P

p:last-of-type 找到P 然后找P的父级 再找父级下最后一个元素是P

li:nth-child(2)  找到li 然后找li的父级 再找父级下第二个元素是li

li:nth-of-type(2)

li:nth-last-child(2)  找到li 然后找li的父级 再找父级下倒数第二元素个是li

li:nth-last-of-type(2) 

li:nth-child(even)  找到li的所有偶数位(2N)

li:nth-last-child(even)

li:nth-last-child(odd) 找到li的所有奇数位(2N-1 或 2n+1)

li:nth-last-child(odd)

li:only-child 找到li是父级的唯一子元素(选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素)

li:only-of-type 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

css选择器