您可以在 Chrome Inspector 中添加新的 CSS 属性吗?

发布于 2024-11-19 11:58:13 字数 86 浏览 4 评论 0原文

是否可以在 Chrome 检查器中添加新的 CSS 属性?看来您只能编辑现有属性。

另外,一旦你编辑了属性,有没有办法整体查看修改后的CSS?

Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties.

Also, once you edit the properties, is there a way to view the revised CSS as a whole?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(4

面犯桃花 2024-11-26 11:58:13

是的,可以在 Chrome 检查器中添加新的 CSS 属性,并通过几个简单的步骤查看它们:

  1. 右键单击要更改的元素,然后选择“检查元素”;
  2. 单击“新建样式规则”按钮(下图中的1);
  3. Google Chrome 将分配一个 CSS 匹配规则,您可以重命名该规则(下图中的2);
  4. 添加您的 CSS 规则(下图中的 2);
  5. 完成后,只需检查“计算样式”窗格(下图中的3)。

在 Chrome 检查器中添加新的 CSS 属性

Yes, it's possible to add new CSS properties in the Chrome inspector and review them in a few easy steps:

  1. Right click in the element you want to change and choose "Inspect element";
  2. Click the "New Style Rule" button (1 in the image below);
  3. Google Chrome will assign a CSS matching rule which you can rename (2 in the image below);
  4. Add your CSS rules (2 in the image below);
  5. When you're done just check the "Computed Style" pane (3 in the image below).

Add new CSS properties in the Chrome inspector

絕版丫頭 2024-11-26 11:58:13

您可以在规则中双击添加新属性。您也可以从角落的滚轮添加新规则,然后选择“新样式规则”。

要查看整个修订后的文档,请访问:Resources >框架>站点名称>样式表> stylesheet-name.css

或者只需单击 css 属性上方的 + 符号

You can add new property in a rule double clicking within the rule. Also you can add a new rule from the wheel in the corner and then select "New Style Rule".

To view the whole revised document go to: Resources > Frame > site name > Stylesheets > stylesheet-name.css

Or simply Click the + symbol above the css properties

蓝戈者 2024-11-26 11:58:13

是否可以在 Chrome 检查器中添加新的 CSS 属性?它
似乎您只能编辑现有属性...

只需双击“样式”面板中的任何白色和空白区域即可。

我倾向于双击 } 右侧来编辑我想要编辑的 CSS 规则。

另外,编辑属性后,有没有办法查看修改后的属性
CSS 作为一个整体?

请参阅@Sotiris 的回答

据我所知。

可能有一个扩展可以做到这一点,但如果存在,它可能不会保留原始格式的精确格式CSS。

Is it possible to add new CSS properties in the Chrome inspector? It
seems that you can only edit existing properties...

Simply double-click in any white and empty space in the "Styles" panel.

I tend to double-click to the right of the } for whichever CSS rule I want to edit.

Also, once you edit the properties, is there a way to view the revised
CSS as a whole?

See @Sotiris's answer.

Not that I know of.

There may be an extension that can do this, but if one exists, it probably won't preserve the exact formatting of your original CSS.

陌生 2024-11-26 11:58:13

为什么不呢?以下是 Google Chrome 检查器的 Styles 面板的屏幕截图 Google Chrome 检查器

注意该块:

element.style {

}

您只需在该区域单击鼠标,检查器将为您提供添加新样式的机会。如果您需要向元素添加新属性,请在 Elements 面板中右键单击该元素,然后选择“添加属性”。

另外,编辑属性后,有没有办法整体查看修改后的 CSS?

Compated Style 面板没有为您提供此信息吗?在那里,您可以检查应用于节点的所有样式,实际上,它们是按照什么规则以及从什么样式表应用的。

Why not? Here is the screenshot of the Styles panel of the Google Chrome inspector Google Chrome inspector

Notice the block:

element.style {

}

You just click with mouse in that area and inspector will give you an opportunity to add new styles. If you need to add a new attribute to an element, you right click on it in the Elements panel and choose 'Add attribute'.

Also, once you edit the properties, is there a way to view the revised CSS as a whole?

Doesn't Computed Style panel give you this information? There you can check al lthe styles applied to a node and, actually, in what rule and from what stylesheet they are applied.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文