012 认识css 伪类选择器（ A标签样式，css添加标签的功能 ） 样式继承 优先级

目录

• A标签 样式
  • 1、A标签 在html 页面中显示的颜色变化
  • 2、组合标签 伪标签
  • 3 、 before after 在一个标签内 添加一个子标签 css清除浮动
• 样式继承
• 属性选择器的优先级关系

A标签 样式

1、A标签 在html 页面中显示的颜色变化

  <style>
     /*未点击的时候的状态  */
    a:link{
        color: red;
    }

      /*点击过后 显示的的颜色*/
    a:visited{
        color: yellow;
    }


   /*鼠标悬浮到a标签上显示的颜色*/
    a:hover{
        color: blueviolet;
    }

    /*鼠标点中，不松的颜色*/
    a:active{
        color: white;
    }
  </style>

2、组合标签 伪标签

first-child 表示父标签的下的第一个元素，父亲的第一个儿子
last-child  表示父标签的下的最后一个元素，父亲的最后一个儿子

如果存在多种样式的话，还可以更精细
子代标签 使用组合标签与，定位出想要的标签
.c1 这个父级标签的第一个标签，且必须是div 标签的，才能加载样式

3 、 before after 在一个标签内 添加一个子标签 css清除浮动

before 在父级标签的内容的前面添加一个标签  是子代标签

after 在父级标签的内容的后面添加一个标签  是子代标签

样式继承

标签样式的继承关系 整个html文件是一个家族的关系，嵌套和关联了N个父子关系和兄弟关系，html标签是始祖标签，在任何的层级下，style作用到的标签及其子孙标签（未被指定样式）都将继承该样式，有个别样式是不具备继承的。

属性选择器的优先级关系

 相同的选择器可以进行分数的比较，
 不同属性间，不能进行分数比较，只能进行属性比较，id 大于 11个class  大于 101个标签选择器。
 单层结构html： id选择器 100分值 > class 10分值  > 标签名 1分值
 
 多层结构html： 根据选择器所处的分值之和，决定样式是否能够作用到标签上。

当选择器的分值相等时，看选择器所处的位置，谁最后加载就选择谁，也就是 谁在文件的下方选择谁。 

css 行内引入的样式 分值1000 一般不使用

测试的时候使用 color:yellow!important 强制加载样式。