css 选择器 (学习笔记)

参考http://zachary-guo.iteye.com/blog/6051161. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。解释 : find p , p.PRev = div 就ok!2. [class~=flower]选择 title 属性包含单词 "flower" 的所有元素。解释 : 注意是单词哦 class="abc xyz" abc这个算一个单词3. [lang|=en]选择 lang 属性值以 "en" 开头的所有元素。解释 : 注意所谓的开头一定要用 - 做分隔符 , class="en-yy" ok, class="en_yy" fail 4. [src^="https"]解释 : 属性 str 开头是 https , 这个可以匹配 httpsss 也行不像 |5. [src$=".pdf"]解释 ： $是后面，和 ^ 相反，跟正则一样理解6. [src*=ggc]解释 : 只要有ggc就中，像sql 的like %ggc%4.p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。解释 : elem has any parent , elem is first child , elem is p . 3个condition true 就 ok note : 这个和 p:nth-child(1) 是一样的区别 nth-of-type 和 nth-of-child这两者的差异用一个跟切合实际的情况比喻就是计划生育查人口：nth-of-child是如果是第二胎，且是女孩，罚款！nth-of-type是管他第几胎，第二个出身的女孩，罚款！nth-of-type(2n+1) 算法，n就代表每一个row,从0,1,2... 2n+1 就是 2*0+1, 2*1+1, 2*2+1 ...普通乘法和加法来的，那么每一次算出答案后就让那个答案亮灯咯5.p:nth-of-type(5)解释 : eq(4) 选中第5个6.p:nth-of-type(n+3) || p:nth-last-of-type(-n+3) 后面算起 child 也是有解释 : >=37.p:nth-of-type(-n+3)解释 : <=38. p:nth-of-type(odd/even)解释 : 单数 , 双数9.p:nth-of-type(3n+2)解释 : 一开始n是0 算一 +2 可以表示为其实点 . 从第2个拿起，3*n就是3的倍数，所以可以表示为每3个亮一个灯咯, 整句就是从第2个开始，每3个亮1个(起点2也亮哦)10. p:nth-of-type(n+3):nth-of-type(-n+5)解释 : between 3-5 (3和5都算) , 原理是filter2 次咯