前端入门part09css三大特性

继承性
  • 作用:给父元素设置一些属性,子元素也可以使用;
  • 常用于网页中一些共性的设置,比如给body设置一些属性;
  • 注意:并不是所有的属性都可以继承,只有color、text、line开头的属性才可以继承;
  • 在css中的继承中,不仅仅是儿子可以继承,后代都可以继承;
  • 特殊的
  • ①:a标签的文字颜色和下划线是不可以继承的;
  • ②:h标签的文字大小是不可以继承的;
  • 前端入门part09css三大特性_第1张图片
层叠性
  • 就是css处理冲突的一种能力;比如一个red一个blue,最后变为啥色;
  • 注意:必须是多个选择器选择了同一个标签,又设置了相同的属性
  • 具体到底啥颜色跟优先级有关;
优先级
  • 当多个选择器选中同一个标签,并且给同一个标签设置相同的属性是如何层叠就由优先级来确定;
    判断优先级方法①:是否直接选中?
  • 直接选中:比如通过标签或者ID号或者类名直接找到的具体哪一个标签
  • 间接选中:通过继承获得的属性;
  • 前端入门part09css三大特性_第2张图片
  • 比如p如果通过继承实现对应属性,则听离他更近的li
  • 当直接选中和间接选中都有时,听直接选中的;

判断优先级方法②:是否是相同选择器?

  • 比如则变成后面设置的颜色前端入门part09css三大特性_第3张图片
  • 如果都是直接选中,并且为同类型的选择器,那么就是谁写在后面听谁的;

不同选择器如何判断?

  • 如果都是直接选中,并且不是同类型的选择器,则按照选择器的优先级
  • id>类>标签>通配符>继承>浏览器默认 通配符是选中用*所有标签

判断规则
先判断是否直接选中,间接选中听近的;直接选中同类型听后面的,直接选中不同类型按照优先级;

特殊地:优先级中还有个important

  • 用于提升某个直接选中标签的选择器中的某个属性的优先级,可以将被指定的属性的优先级提升为最高;

  • important只可以用于直接选中不可以间接选中;

  • 在这里插入图片描述

  • 你只是给颜色提升了,至于字体大小还得在判断!!!

  • !important前面不可以有分号!!!!!!!!!!!


多个选择器一起使用时,我们可以通过计算权重来判断优先级?

那么如何计算权重呢? 权重必须在直接选中是才有计算的必要;

  • ① 看有多少个id,id越多优先级越高;
  • ②如果id数目一样,通过类名个数判断,类名个数越多优先级越高;
  • ③如果类名个数一样,那么再看标签名称个数,标签越多优先级越高;
  • ④如果id、类名、标签数都一样,那么不会再往下比较了,谁写在后面听谁的;

你可能感兴趣的:(前端入门,css)