如何解决如何从Chrome开发工具中获取确切的.css目标? 更新
我使用Chrome开发工具来浏览网页上元素的大小。我们正在使用Krajee中的pdf查看器插件,我想将元素大小强制为500x500 px。我可以在chrometools中找到该元素,并在那里手动调整样式,如下所示。
我现在想更新app.css
,使其始终为500x500px。如您所见,该元素是相当嵌套的(即file-preview-frame -> kv-file-content -> kv-preview-data
)。因此,我不知道如何针对.css设置此目标。 是否可以通过chrome工具获取此元素的.css路径?换句话说,我可以将chrometools中的粘贴内容复制到我的.css文件中,以正确设置该元素(或该元素)课)?
PS:我猜它像myviewer.file-preview-frame.kv-file-content.kv-preview-data
,但是有没有办法复制它而不必猜测一百万种可能性?抱歉,我的CSS不好。
更新
基于评论/答案,建议右键单击并复制选择器。这样,我得到以下信息:
#preview-1600093158823_90-0 > div.kv-file-content > embed
这里有两个问题。首先,id(16000 ...)在每次页面加载时都会更改。我猜该插件尚未ID正确嵌入。其次,可以将此复制的选择器直接放入app.css
文件中吗? IE是有效的.css还是仅有效的jQuery,我必须从javascript / jQuery访问它?
如何复制
转到Krajee demo,在第一个演示中选择与acrobat.pdf文件相对应的元素,然后选择嵌入。
解决方法
您可以在开发工具中右键单击该元素,然后复制css选择器。
然后可以将其直接粘贴到CSS文件中,并在花括号后放入样式。
有可能您不需要完整的选择器,因为这样做虽然有时会给您一个ID就足够了。通常(尤其是在css-in-js中),赋予元素的类名也不是一致的,而是在页面渲染之间改变。
更新
如果开发工具中的css目标不够好(例如在更新的问题中给出的特定网站中),则可以使用数据属性来选择元素,因此:
div[data-template="pdf"] > div.kv-file-content > embed
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。