谷歌浏览器如何查css,谷歌浏览器查看编辑元素CSS样式_谷歌工具

通过谷歌浏览器可以查看当前页面应用的具体CSS代码。

并且还可以在线编辑(仅对客户端有效)对应的CSS代码以便查看页面渲染效果。

一.查看指定元素CSS样式&＃xff1a;

通过谷歌浏览器我们可以查看应用于指定元素上的CSS代码。

查看步骤如下&＃xff1a;

(1).鼠标右击对应的元素&＃xff1a;

然后点击弹出层的检查菜单&＃xff0c;会弹出如下界面&＃xff1a;

在右侧可以看到定义在链接元素的CSS代码&＃xff0c;简单分析如下&＃xff1a;

(1).顶部element.style展示的是通过元素style属性定义的CSS&＃xff0c;由于没有定义所以为空。

(2).下面都是通过外部引入CSS文件定义的CSS属性&＃xff0c;并且给出了CSS具体定义的位置。

(3).被横线穿过的CSS属性定义&＃xff0c;说明它被其他的同名属性定义覆盖&＃xff0c;并没有生效。

再往下看&＃xff0c;截图如下&＃xff1a;

User agent stylesheets表示是浏览器自带默认的样式规则。

继续往下看&＃xff0c;截图如下&＃xff1a;

Inherited from表示CSS属性从指定元素几成而来。

如上述截图&＃xff0c;点击dd可以跳转到对应的DOM结构位置&＃xff0c;并且右侧也会显示dd的CSS代码定义。

二.查看CSS伪类的定义&＃xff1a;

上面介绍的方式无法查看定义在元素上的CSS伪类代码。

点击顶部的:hov按钮&＃xff0c;然后选择弹出层里面的相关伪类即可查看对应的CSS代码了。

三.编辑CSS代码&＃xff1a;

下面再来介绍一下如何在线编辑CSS代码。

当然这个编辑只会对客户端的样式表现产生影响&＃xff0c;不会影响服务器代码&＃xff0c;否则岂不是乱套了。

按照上面介绍的方式检查元素&＃xff0c;然后直接在线编辑元素&＃xff1a;

(1).直接在元素上通过style属性设置&＃xff1a;

右击对应的元素&＃xff0c;然后会弹出上述菜单&＃xff0c;点击Edit as HTML进行编辑即可&＃xff1a;

(2).编辑CSS代码&＃xff1a;

检查元素后&＃xff0c;会在某个地方出现应用在其上的CSS代码。

我们可以直接在线编辑这些代码&＃xff1a;

通过双击指定的位置可以修改已经存在的CSS代码&＃xff0c;或者添加新的CSS代码。

(3).为元素添加class属性&＃xff1a;

点击对应的按钮&＃xff0c;可以输入要添加的class的名称&＃xff0c;即可添加完毕。

(4).添加新的规则&＃xff1a;

点击加号即可为当前元素添加一个新的样式规则&＃xff0c;然后在其中编辑相应代码即可。