Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
918 views
in Technique[技术] by (71.8m points)

How to replace global CSS html, body styles with something more specific and get the same styling?

I have a navbar which I want to just be able to copy into each page of my website without it affecting the styling of anything on the page. The problem is that the navbar which I have uses html, body as a selector and so obviously affects everything on the page.

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
    font-size: 62.5%;
    font-size: 10px;
}

I thought I would be able to replace html, body with whatever class, id or tags that I had surrounding my navbar html code. For example I tried to do this instead:

.navbar {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
    font-size: 62.5%;
    font-size: 10px;
}

But it doesn't apply the styles the same way as when html, body is specified even though all of the html was contained inside class='navbar'

Can someone advise me how to keep my navbar styled the same way without having all of these styles applied globally to the rest of the page? The navbar in question can be seen on the about, gallery, and contact pages of my website: https://memsmosaics.com/gallery.html

Thanks,


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...