css 选择器 (学习笔记)

浏览数：19 / 时间：2015年06月09日

参考 http://zachary-guo.iteye.com/blog/605116

1. 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 也是有
解释 : >=3

7.p:nth-of-type(-n+3)
解释 : <=3

8. 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 次咯