css3学习笔记（一）

E F 包含选择器  包括孙子辈的

E>F 子选择器   不包括孙子辈的

E+F 相邻选择器

E~F 兄弟选择器

<!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F-->
选中E出现的后面的兄弟

<style>
p~p{color:#f00;}
</style>
<div><!--该div是父元素-->
<p>中国十大杰出人物</p>
<p>①别人家的孩子</p>
<p>②别人家的爸爸</p>
<p>③别人家的妈妈</p>
<p>④别人家的老公</p>
<p>⑤别人家的老婆</p>
<p>⑥别人家的公公</p>
<p>⑦别人家的婆婆</p>
<p>⑧别人家的公司</p>
<p>⑨别人家的领到</p>
<p>⑩别人家的员工</p>
</div>

伪类选择器

E:link  

E:visited

E:hover

E:active

E:focus

E:first

E:last

E：nth-child(){}

li:nth-child(2){}:找到li父亲的第二个元素，并且第二个元素必须是li，否则无效

li:nth-child(odd)  {} odd奇数    even偶数

li:nth-child(3n+1){}  自定义序列 （n从0自增1）

E:nth-last-child(){}  倒叙方式

 E:only-only-child{  } 父元素的唯一子元素，独生子

E:first-of-type{} 先过滤掉不符合E的元素，再排序

E:last-of-type{}

E:nth-of-type(){}

E:only-of-type(){}如果不是独生子就不会选中了

属性选择器

E[att]   如果有

E[att='val']

E[att~='val']  

E[att|='val'] 

伪对象选择器

E:first-letter

E:first-line

E:before

E:after