快捷导航
蚂蚁部落 网站首页 前端教程 谷歌工具 查看内容

栏目导航

谷歌浏览器检查编辑样式

2017-8-11 12:31| 发布者: admin| 查看: 63| 评论: 0|来自: 蚂蚁部落

通过谷歌浏览器检查元素功能,定位到指定元素:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/123637n786a5r7pe677tnb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

选中要检查的元素,然后右击,在弹出的菜单中点击"检查",进入如下界面:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/124209aya8ms765u6f38g2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

进入到Elements面板,右侧就是检查元素所应用的样式,下面分别做一下介绍:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/124454f1kjfpfydikvarrs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面截图位于Elements面板右侧的Styles选项;应用于指定元素的CSS规则,优先级从高到低展示:

(1).element.style:直接通过style属性定义在元素本身的样式属性:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/130743pjkemxxrkk9qykww.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).element.style下面的是与元素匹配的所有CSS规则:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/131146wieianli1upifilq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

带有删除线的样式是通过层叠规则被覆盖的CSS规则。

样式选择器的后面给出了样式的来源文件;User agent stylesheets表示是浏览器自带默认的样式规则。

(3).再后面是继承获取的样式规则:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/131730uz2srua775xsu3px.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

截图中表示下面的代码是从定义li的样式中继承而来;点击li,Elements面板内容会导航到此节点在DOM树视图中的位置,右侧的Styles选项卡会定位到此li节点相关的样式定义。

(4).呈现浅灰色呈现的表示在运行时被计算样式取代,已经无效的规则。

查看选择器应用的元素:

鼠标悬浮选中右侧Styles选项卡中的选择器,可以在页面查看应用该选择器的所有元素。

演示截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/132846bd2h0zpwbwlhcbwg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

添加, 启用, 和禁用CSS样式:

 a:3:{s:3:\"pic\";s:43:\"portal/201708/11/133401e4zfrh0ntphih4hp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击.cls可以显示与当前检查的元素相关的css样式;点击每一条规则前面的复选框可以取消或者添加对应的规则。

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/133812h02vmqiclmg3o7al.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以添加自定义的样式规则:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/133933gqggzjq10jpqvjbb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也可以点击右侧的加号按钮,添加一个规则块:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/134227zi0ibqc01xyc3n13.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

添加或删除动态样式(伪类):

可以在元素上手动设置动态的伪类选择器(例如:active, :focus, :hover, 和 :visited) :

有两种方式可以实现:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/134814b0vovrbhkosomsbr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Elements面板中,在对应元素上右击,然后选择相应的项进行设置即可。

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/135038rxvqpzumbq81n2v1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Elements面板右侧,Styles选项卡界面设置。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:36 , Processed in 0.062604 second(s), 20 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部