css 选择器 (学习笔记)

更新 : 2021-04-20

没想到啊，这么多年后尽然还有更新

今天遇到了一个非常基础的问题. 

<div data-value="@product.name"></div>

用 js query select 的时候 [data-value="${product.name}"]

由于 product name 是用户输入的, 所以如果用户输入一些符号是会导致它坏掉的. 比如 quote symbol " 

解决的方式是 escape " 换去 \" 

和 html 的 escape 是不一样的哦. 不要问我为什么不一样，总之 escape 之后就可以 select 到了

js 的代码是 CSS.escape(product.name);

refer: 

https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape#browser_compatibility

https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript

 

 

 

 

 

 

 

参考 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 次咯