CSS Div Styles 泄漏到其他 Div 类

Question

So I'm trying to make an image a hidden link.所以我试图使图像成为隐藏链接。 I had my links in my topBar div be styled to look like buttons with CSS, when I attempted to make an image in my Header just a simple link you could click on it styled it like the button even though it was in an entirely differnt div tag and had a different div class.当我试图在我的 Header 中制作图像时，我将我的 topBar div 中的链接设置为看起来像按钮的样式，即使它位于完全不同的 div 中，您也可以单击它。标签并具有不同的 div class。

HTML: 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: 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

Instead of代替

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

and和

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

It should be它应该是

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

and和

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

CSS Div Styles 泄漏到其他 Div 类

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-08 20:47:41

CSS Div Styles 泄漏到其他 Div 类

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-08 20:47:41

解决方案1
0 已采纳 2022-01-08 20:47:41