初入WEB前端(12)CSS 继承

    技术2022-07-11  100

    1.继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ color: darkorange; font-size: 30px; } div{ color: darkslateblue; font-size: 30px; } /* 继承:样式的继承,为一个元素设置的样式同时会应用到它的后代元素上 发生在祖先元素和后代元素上 利用继承可以让一些通用的样式统一设置到共同的祖先上 这样只需要设置一次就可以让所有的元素都具有该样式 但不是所有的样式都会被继承:背景相关、布局相关的不会被继承(等等) */ </style> </head> <body> <p> 我的 <br> <span>我是p元素里的</span> </p> <span>我是p元素外的</span> <div> <span>div里面</span> </div> <span>div外面</span> </body> </html>

    我们可以看到,background-color 表格中 Inherited是no,说明它是不继承的

    Processed: 0.011, SQL: 9