Este site está com funcionalidades limitadas enquanto realizamos manutenção para melhorar sua experiência de uso. Se nenhum artigo resolver seu problema e você quiser fazer uma pergunta, nossa comunidade de suporte pode te ajudar em @FirefoxSupport no Twitter e /r/firefox no Reddit.

Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

How can you add a new rule in the inspector?

  • 4 respostas
  • 6 têm este problema
  • 11 visualizações
  • Última resposta de ddavidd

more options

I've grown very accustomed to the Chrome developer tools, and I've recently decided to try out Firefox.

Best I can tell, you cannot add custom rules in the Firefox inspector tab. For instance, if I inspect the element on an image in Firefox, I am given all the defined styles (rules) for that element. I can, of course, edit those defined styles. However, it does not give me an option to add my own custom styles unless I jump over to the 'Style Editor' tab and write them in manually. This becomes a problem when I want to write in a quick :hover or a :first-child or reference any other selecter that's not already defined.

In Chrome, not only do I add/remove/change styles directly in the Inspector, but it also saves a custom inspector stylesheet for me with all the changes I made.

Chrome example: http://cl.ly/Wm56

Firefox example: http://cl.ly/WmUP

Is there any way to add custom styles directly from the inspector tab in Firefox?

Thanks!

I've grown very accustomed to the Chrome developer tools, and I've recently decided to try out Firefox. Best I can tell, you cannot add custom rules in the Firefox inspector tab. For instance, if I inspect the element on an image in Firefox, I am given all the defined styles (rules) for that element. I can, of course, edit those defined styles. However, it does not give me an option to add my own custom styles unless I jump over to the 'Style Editor' tab and write them in manually. This becomes a problem when I want to write in a quick :hover or a :first-child or reference any other selecter that's not already defined. In Chrome, not only do I add/remove/change styles directly in the Inspector, but it also saves a custom inspector stylesheet for me with all the changes I made. Chrome example: http://cl.ly/Wm56 Firefox example: http://cl.ly/WmUP Is there any way to add custom styles directly from the inspector tab in Firefox? Thanks!

Solução escolhida

Yes, that is not possible AFAIK. You can only modify a rule that way and add an extra selector by editing the file in the style editor.

Maybe file an enhancement bug to add this feature.

Ler esta resposta 👍 0

Todas as respostas (4)

more options

You will notice an element {} item at the top of the Rules list in the right plane. You can click between the curly brackets {} to enter a new inline rule for this element. You can do this within other rules {} as well. Type the colon to separate the property name and value. That is easier than adding a style attribute in the left pane or editing a style sheet file. That should work as well as rules added this way show as a style rule.


Alterado por cor-el em

more options

Thanks for the reply! Unfortunately this is not what I'm asking. I have read the documentation on the link you provided, and I don't see where it specifically answers what I'm asking.

Perhaps this will help clarify: http://cl.ly/Wn4E

Is there a way to do all this within the inspector panel in Firefox? Thanks!

more options

Solução escolhida

Yes, that is not possible AFAIK. You can only modify a rule that way and add an extra selector by editing the file in the style editor.

Maybe file an enhancement bug to add this feature.

more options

Thanks, I just submitted feedback to Firefox.