css选择器

• 并集选择器

　　　　div ,p,#p1,.hello{}

• 交集选择器

　　　　p#p2{bgc:yellow}  选中既是p标签又带有p2类的元素

• 元素选择器 

　　　　<p>this is  a 元素</p>

　　　　p{bcg:yellow}

• id选择器

　　　　<div id="No1"></div>

　　　　#No1{bcg:yellow}

• 类选择器

　　　　<div  class="container"></div>

　　　　.container{bcg:yellow}

• 子元素选择器

　　<div> <p> </p></div>

• • div>p{bcg:yellow}
  • p:first-child{}   选中的既是p元素又是第一个子元素的元素，不考虑是子元素的父亲是谁
  • body >p:first-child{}   选中body的第一个子元素，同时还得是p元素，考虑子元素的父亲是body
  • p:last-child{}选中　最后最后一个子元素　
  • p:nth-child(2){} 还可以传入even和odd表示选奇偶位置 选中第二个子元素
  • p:first-of-type{} 第一个p
• 兄弟选择器
  • span+p{}  选中span后面的那个兄弟p标签
  • span~p{}  选中span后面所有的兄弟p标签
• a的伪类(表示的状态)hover和active必须在visited和link的后面

　　　　　　a:visited{}

　　　　　　a:link{}

　　　　　　a:hover{}

　　　　　　:active{}

• 伪元素选择器

　　　　:first-letter

　　　　:first-line

　　　　:before

　　　　:after

before和after与content结合使用

 

 

•  属性选择器：根据元素中的属性值来选择元素

1.根据属性名选  p[title]{ bcg:yellow;}

2.根据属性值选  p[title=hello]{bcg:red;}

3.根据属性值过滤  p[title^="ab"]（以属性值为ab的开头）   p[title$="c"]{bcg:yellow}（以属性值为c的结尾）p[title*="ab"](包含属性值ab)

• 否定伪类选择器

　　p:not(.hello)选中