如何从 Inspect Element 获取 CSS 样式
是否有任何工具/扩展可以帮助我生成 CSS 签名或样式
例如:
我看到一个 HTML 对象,我想更改它,我右键单击我的浏览器(Chrome、Firefox)并选择检查该元素,在那里我将能够修改任何CSS属性“live”。有时很难知道哪种风格签名与最近的更改相对应。
element.style {
background: none;
}
我的问题是是否有任何工具可以告诉您 element.style 的正确名称是什么。我认为每种样式可能有多个结果...
我已经在使用类似 Chrome Firebug 的工具了。有些元素没有定义样式,因此在检查元素时默认显示 element.style。在那里我可以开始编辑以查看更改的效果。
我要求的是一些工具来更改此默认样式名称:“element.style”到完整正确的路径,例如:.superior_div_class #the_element_you_want_to_edit
Is any tool / extension out there that helps me generating the CSS signature or style
For example:
I see a HTML object and I want to change it, I right click on my Browser ( Chrome, Firefox ) and I choose to inspect the element, there I will be able to modify any css attribute "live". Sometimes it's difficult to know which style signature would correspond to the recent changes.
element.style {
background: none;
}
My question is if there is any tool that tells you what element.style correct name would be., I think may be multiple results per style though...
I'm already using Chrome Firebug like tools. Some elements have no style defined so it appears element.style by default when Inspecting the element. There I can start editing to see how changes would effect.
What I'm asking for is for some tool to change this default style name: "element.style" to a whole correct path for example: .superior_div_class #the_element_you_want_to_edit
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
在 Firefox 的
Firebug
中,您可以按照描述检查元素,然后复制XPath
或Css Path
。这为您提供了从html
到特定元素所需的完整路径。例如,假设您正在检查 id 为
myLink
的链接。您可以复制 Css 路径以获得类似以下内容:html body form table.myTable tr td a#myLink
In
Firebug
for Firefox, you can inspect an element as you describe, and then copy either theXPath
orCss Path
. This gives you the entire path you need right fromhtml
down to the specific element.For example say you are inspecting a link with id
myLink
. You can copy the Css Path to get something like:html body form table.myTable tr td a#myLink
如果您使用的是 chrome 或 firefox,您只需单击 html 并单击“编辑”,然后为 html 元素提供一个类或 id,它就会实时更新它。
If you're using chrome or firefox you can just click in the html and click edit and then give a class or id to the html element and it updates it live.
在 Chrome 中,在“检查元素”中,在突出显示“元素”和“控制台”的顶部,单击源代码并在嵌套文件中查找您要查找的元素。我认为从今天开始,HTML 文件是用颜色编码的白色和 CSS 文件是黄色,但这可能会改变
。 src="https://i.sstatic.net/wPsPL.png" alt="">
In Chrome, in 'inspect element", on the top where "element" and "console" are highlighted, click source and look through the nested files for the element you are looking for. I think as of today HTML files are color-coded white and CSS files are yellow, but that may change.
Firebug 扩展
。Firebug extension
.