CSS基础之CSS三大特性

文章目录

  • 1.层叠性
  • 2.继承性
  • 3.优先级


1.层叠性

所谓层叠性是指多种CSS样式叠加,它是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性覆盖掉

原则:

  • 样式冲突,遵循的原则是就近原则。 哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠

2.继承性

子标签会继承父标签里面的某些样式,例如文本颜色和字号等

Tips:

  • 恰当地使用继承可以简化代码,降低CSS样式复杂性

3.优先级

当同一个元素指定多个选择器,就会有优先级的产生

原则:

  • 选择器相同,则执行层叠性
  • 选择器不同,则按权重
  • 权重计算公式:
选择器 权重
继承或者 * 0,0,0,0
元素选择器(标签选择器) 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 无穷大

优先级注意点:

  • 等级判断是从左到右,如果某一位数值相同,则判断下一位数值
  • 继承的权重是0
  • 权重可以叠加,但是永远不会有进位

权重的叠加:

如果是复合选择器,则会有权重的叠加,需要计算权重

<head>
    <style>
        li {
            color: skyblue;
        }

        ul li {
            color: purple;
        }

        .nav li {
            color: red;
        }
    style>

head>
<body>
    <ul class=".nav">
        <li>oneli>
        <li>twoli>
        <li>threeli>
    ul>
body>
选择器 权重
div ul li 0,0,0,3
.nav ul li 0,0,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1

你可能感兴趣的:(css,前端,html,css,css3,前端,html,html5)