如何从 Inspect Element 获取 CSS 样式

发布于 2024-12-04 13:06:27 字数 484 浏览 1 评论 0原文

是否有任何工具/扩展可以帮助我生成 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

菊凝晚露 2024-12-11 13:06:27

在 Firefox 的 Firebug 中,您可以按照描述检查元素,然后复制 XPathCss Path。这为您提供了从 html 到特定元素所需的完整路径。

Copy path options

例如,假设您正在检查 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 the XPath or Css Path. This gives you the entire path you need right from html down to the specific element.

Copy path options

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

[旋木] 2024-12-11 13:06:27

如果您使用的是 chrome 或 firefox,您只需单击 html 并单击“编辑”,然后为 html 元素提供一个类或 id,它就会实时更新它。

Firebug 截图

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.

Firebug screenshot

爱你是孤单的心事 2024-12-11 13:06:27

在 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.

眼藏柔 2024-12-11 13:06:27
  • Chrome 中,只需按 Ctrl+Shift+I 即可调出开发人员工具
  • IE8+< /strong> 按 F12
  • Firefox 中安装 Firebug 扩展
  • In Chrome, just hit Ctrl+Shift+I to bring up the developers tools
  • In IE8+ hit F12
  • In Firefox install the Firebug extension.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文