CSS Div 风格渗入其他 Div 类

Question

所以我正在尝试将图像设为隐藏 link。我在我的 topBar div 中设置了我的 links 样式，使其看起来像带有 CSS 的按钮，当我试图在我的页眉中制作一个简单的图像时 link 你可以单击它的样式就像按钮一样，即使它位于完全不同的 div 标签中并且具有不同的 div class.

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head title="ScoopNoop">
        <link rel="stylesheet" href="../css files/scoopnoop.css">
    </head>
    <body>
        
        <div class="topBar">
            <a href="#botBar">Jump to Bottom Bar</a>
            <a href="page2.html" target="_self">Page 2</a>
            <a href="https://www.google.com" target="_blank">Google</a>
            <a href="https://www.colts.com" target="_blank">Colts</a>
        </div>

        <br>

        <div class="header">
            <a href="https://en.wikipedia.org/wiki/Easter_egg_(media)">
                <img src="../images/derp.jpg" alt="Derp">
            </a>
            <h1>
                ScoopNoop
            </h1>
            <img src="../images/derp.jpg" alt="Derp">
        </div>

CSS:

/* All */

body {
background-color: skyblue;}

.body  {
padding: 15px 15px;}

/* Bottom Bar */

.bottommBar {
float: left;
margin: 15px;}

.bottomBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;}

.bottomBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}


/* Header */

div.header {
text-align: center;
margin: 3em;}

.header img {
max-width: 10%;
height: auto;
margin: 5px 5px;
display: inline-block;}

.header h1 {
margin: 5px 5px;
display: inline-block;}

/* Top Bar */

.topBar {
margin: 2em;}

.topBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;[enter image description here][1]}

.topBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}

Answer 1

而不是

.topBar a:visited, a:active, a:link

和

.bottomBar a:visited, a:active, a:link

应该是

.topBar a:visited, .topBar a:active, .topBar a:link

和

.bottomBar a:visited, .bottomBar a:active, .bottomBar a:link

CSS Div 风格渗入其他 Div 类

CSS Div Styles leaking into other Div classes

html

css

styling