Article list
Author writing

How to Copy Webpage Stylesheets (CSS): Element Inspector

On this page

Static blog themes, the mainstream is based on foreign templates, modified and adjusted without much consideration for Chinese content layout.

Main Text

About half a month ago, I adjusted the blog’s stylesheet – as I’ve been developing backend services for many years, I’m a pure newbie in frontend. After struggling with it for half a day, the design wasn’t quite reasonable. Suddenly an idea struck me: I looked at the technical blogs I often read – infoq and OpenChina – and their layouts look really good. Could I borrow some of those? After reviewing the source files, I got lost trying to locate the relevant elements.

Frontend developers might be laughing at this point… I didn’t understand how to locate the specified elements, but that’s okay; I have plenty of free time on weekends, so I stopped and thought about it. It reminded me of when I wrote Python crawlers – I had used something similar before.

Element Inspection

That’s right, it’s the browser’s built-in element inspection tool – copying stylesheets, locating specific elements, all done in minutes. selector to locate elements, hugo to create a “user define css”

  • Copy element
  • Copy outerHTML
  • Copy selector
  • Copy JS path
  • Copy styles
  • Copy XPath
  • Copy full XPath
Article reading tools
Author tianlong.xiang License Licensed under CC BY-NC-SA 4.0 Last updated on

Comments will load when you scroll here.