css关系选择器

   div p  选择以div为间接父元素的所有p元素
div>p  选择以div为直接父元素的所有p元素
div+p  选择作为兄弟元素身份紧跟在div后面的p元素
div~p  选择作为兄弟元素身份在div后面的所有p元素
div:empty  选择没有子元素的所有div元素
div:not(.pp)  选择所有class不为pp的div
input:checked 选择所有被选中的input元素
p:first-child 选择为某个父元素的第一个子元素的所有p元素
p:last-child 
p:nth-child(2) 选择为某个父元素的第2个子元素的所有p元素
p:first-of-type 选择为某个父元素的第一次出现的所有子p元素
p:last-of-type 选择为某个父元素的最后一次出现的所有子p元素
p:nth-of-type(2) 选择为某个父元素的第2次出现的所有子p元素

属性选择器

   div[class="pp"] 选择class列表中包含pp这一单词的div
div[class^="pp"]选择class中首个单词的开头为pp的div
div[class$="pp"]选择class中最后一个单词的结尾为pp的div
div[class*="pp"]选择class中存在某一单词，该单词中有pp的div
div[class|="pp"]选择class中首个单词开头为pp-的div

::after清除浮动

1. .clear::after{content:"";display:block;clear:both}加在浮动元素的父元素上的class里
2. over-flow:hidden写在浮动元素父元素的样式里
3. <div class="clear"></div>加在浮动元素的后面跟着,.clear{clear:both;}