CSS选择器

四大标签选择器

   下面四大选择器都能对元素进行修饰，如果都对同一个元素进行修饰的话，实现的是哪一个选择器的修饰样式呢？
   **选择器的优先级**
   w3c规定，通配符选择器权值最低。
   先两两对比：
   标签和类选择器对比：类>标签
   类选择器和id选择器对比：id>类
   标签和id选择器对比：id>标签
   id(100)>类(10)>标签(1)>通配符(0)

问题：有没有比id实现效果更高的？
    有：行内样式>id
问题：有没有比行内样式实现效果级别更高的？
     有：!important(10000)>行内样式(1000)>id(100)>类(10)>标签(1)>通配符(0)
  综上得出结论：不同的选择器修饰同一个元素时候，实现效果以权重值高的为准

标签选择器

   含义：通过标签的名字查找页面中的元素；任何一个标签都可以作为标签选择器。
   p{样式规则}   div{样式规则}   b{样式规则}
  缺点：匹配的范围太广泛，精确度不高

类型选择器

  含义：给元素起一个类名（不同的元素可以使用同一个类名），然后再通过css里面通过类名查找元素并进行修饰

html标签部分：<div class="box"></div>
css查找部分：.box{样式修饰}
   匹配的是页面中的叫box的元素，谁叫box谁被修饰
   注意：.必须携带

优点：能缩小一部分范围，
缺点：精确度还是不高

id选择器

    含义：给元素起一个id的名字，id属性的值是不能重复的。（id具有唯一性），css里面通过id名字查找页面中的元素。

html标签部分：<div id="box"></div>
css查找部分：#box{样式修饰}
匹配的是页面中的叫box的元素，谁叫box谁被修饰
注意：#必须携带

起名字的时候不要用汉字
id具有唯一性，取值不能出现相同的。

通配符选择器

      能匹配页面中的所有元素
      符号：*

*{margin：0；padding：0；}
作用：取消页面中的元素自带的内边距和外边距

问题：这行代码虽然是取消元素自带的内边距和外边距，但是是最优化的吗？

*{margin：0；padding：0；}
p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dt,dd,table,form,body,html{
margin:0;padding:0}

其他选择器

后代选择器

    除了能匹配当前元素的儿子辈分的元素之外还能匹配孙子辈分的元素。使用空格 

子代选择器

     只能 匹配儿子辈分的元素
     使用的符号 >

修饰元素的时候，如果用到了后代和子代选择器修饰元素的时候，实现效果是啥样的？
使用选择器权重的相加，选择器对比的时候，实现样式实现不了的时候=======选择器的权重值权重相加。

伪类选择器

概念：元素本身没有状态改变，需要通过触发鼠标上边的事件去完成那些状态的改变
一般经常使用在a标签里面
：link 超链接访问前的样式
：visited：超链接访问后的样式
：hover：超链接鼠标悬停的样式
：active：超链接激活瞬间
：前后不允许出现任何的空格，与元素紧密相连。

当鼠标放在div上面的时候改变div的背景颜色：
div:hover{background-color:pink;}
当鼠标进入到div之后，改变的是p标签的背景颜色
div:hover>p{background-color:pink;}