Using Chrome's Developer Tools to edit the page live with new global CSS rules

It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?

In my case what I wanted to do was apply the following style rules:

br {display: none} hr {margin-top: 20px} font {font-size: 18px}

To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.

The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.

Answers


There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):

This will create a new style block which will allow you to define the selector yourself:


Need Your Help

Replace text inside a div without affecting any HTML tags inside of it

javascript jquery

I see that this has been asked many times. But, unfortunately I have not come across a straight forward solution. Most solutions revolve around multiple nodes within the div.

Numpy: Index 3D array with index of last axis stored in 2D array

python arrays python-2.7 numpy

I have a ndarray of shape(z,y,x) containing values. I am trying to index this array with another ndarray of shape(y,x) that contains the z-index of the value I am interested in.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.