css学习笔记(六)

css三大特性

1 层叠性:就是对同一个标签设置了相同的属性后,后面的会把前面设置的属性覆盖掉,就好比Java中的子类去复写了父类中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
       p{
           color: red;
           font-size: 30px;
       }
        p{
            color: bisque;
        }
    </style>
</head>
<body>
   <p>今天天气真好</p>
</body>
</html>

比如上面的p标签 color属性就发生了层叠,而font-size还是使用第一个设置的属性30.很好理解,就是一个就近原则问题,当发生层叠时候,谁离p标签近就使用哪个

2 继承性：就是在写css样式时，子标签会继承父标签某些样式,比如文本颜色和字号,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
      .father{
          color: pink;
          background-color: blueviolet;
      }
    </style>
</head>
<body>
   <div class="father">
       <p>今天天气不错</p>
   </div>
</body>
</html>

虽然没有给p标签设置背景色和文本颜色,但是他会从父标签也就是div标签中继承这二个属性

3 优先级所谓优先级就是你在某个标签中设置好几个样式,最后根据优先级决定显示优先级高的那个样式,比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
      .aa{
          color: pink;
      }
        p{
            color: red;
        }
    </style>
</head>
<body>
   <div>
       <p class="aa">今天天气不错</p>
   </div>
</body>
</html>

最后发现文本颜色还是会显示pink这种颜色,说类选择器>标签选择器，而id选择器都这二个优先级都高,而行内选择器比上面说的三个更高,优先级最高的是!important

 p{
            color: red!important;
        }

而*通配符优先级是最低的.

猜你喜欢