web前端入门到实战：CSS继承性&谷歌开发者工具其它作用

本文链接：https://blog.csdn.net/wewfdf/article/details/102154736

一、谷歌开发者工具其他特性（谷歌浏览器快捷键F12）

（1）元素选择，在里面我们可以看到某些行的具体代码

（2）查看源代码

（3）该元素的样式显示，我们可以看到我们选中的元素的具体样式属性，可以在里面进行更改，但不会修改源代码，只会当做临时查看

（4）具体的样式代码

（5）该行代码所在的文件的位置

二、CSS三大特性之继承性

定义：给父元素设置一些属性，子元素也可以使用

例如：谷歌开发者工具也可以给出验证，p标签继承了div标签的属性

    <style> div{ color: red;

        }

</style>

</head>

<body>

<div>

    <p>我是用来测试div工具的</p>

</div>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

3.注意：

（1）并不是所有的属性都是可以继承的，只有以color/font-/text-/line开头的属性才可以继承

如例子中所示，这一属性是灰色的，代表属性并非继承来的

（2）在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承

div{

            color: red;

            font-size: 50px;

            background: skyblue;

        }

 .......省略代码.......... <div>

    <ul>

        <li>

            <p>我是多层次的</p>

        </li>

    </ul>

</div>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

（3）CSS继承性的特殊性

i.a标签的文字颜色和下划线是不能继承的

ii.h标签的文字大小是不能继承的

 div{

            color: red;

            text-decoration: none;

            font-size: 30px;

        }

      ......省略代码........ <div>

<a href="#">测试a标签</a>

<h1> 我是用来测试h标签的 </h1>

</div>