CSS选择器要点笔记

div p 与 div>p 的区别

div p  直属非直属的p元素都会被选择  不必直接包涵，即可嵌套

div>p 只有直属div的p元素会被选择   必须直接包涵，不能是嵌套

----------------------

div~p  与 div+p 的区别 

div~p  div与p必须同级，div元素后面的p元素都会被选择    p元素的前面可以有其它元素， 可被隔断。

div+p  div与p必须同级，div后面紧挨着的p元素会被选择。 p元素的前面必须是div，不能有其它元素， 不可被隔断。

--------------------

p[title]   属性(没有值的)选择器， 多个属性 div[title][id][data]

p[title='abc'] 带值【并且等于abc的】属性选择器。 而div[title]不会被选择。

p[title^='abc'] 【必须】以abc开头的

p[title$='abc'] 【必须】以abc结尾的

p[title*='abc']  包含 abc 即可    

p[title~='bc']  包含 bc 的单词

 注：bc是一个整体，下面代码中，被空格分隔的字符串中，倒数第二个是 bc, 所以也会被选中，如果去除 bc 将不会被选中。 分隔符只能是空格，. , - 都不行。

  <p title='abc a b c abca bc ab'>

p[title|='bc'] 【必须】以bc开头，后面是-的。 换句话说，必须是bc-开头的。 =的后面必须是 bc-

下面的代码是不会被选中的。

<p title='bc bc- abc bc-c'>sadfads</div>

------------------------

p:first-child p是父的首个子元素。 必须紧挨着父元素。   注意：不要有 div:first-child 的写法。 一般前面都有个父元素的，如：div p:first-child
p:first-of-type p不必紧挨着你元素。一般前面都有个父元素的，如：div p:first-of-type

p:only-child  仅有一个，不能有其它的
p:only-of-type  仅有一个，可以有同级其它元素  

div nth-child(n)  n: 0-n,  2n = even   2n-1 = odd   -n+2=前两个  n+2从第二个开始

--------------------------
nth-child(n):not(nth-child(2n)):not(...)