问CSS链接颜色呈现方式与根URL上的index.html不同
EN

Stack Overflow用户

提问于 2022-07-15 04:16:52

回答 1查看 37关注 0票数 0

我的下拉菜单链接应该是浅蓝色悬停。这在我的index.html页面上很好。但是当我访问我的站点的根URL时，它们不会改变它们的标准颜色。我尝试过添加！重要的，但它不工作，似乎没有必要，因为它在index.html上工作。

头标签：

    <!DOCTYPE html>
<html lang="en">
<head>

    <title>Filthy Hippie, a Petz 3/4 fansite</title>
    <link rel="icon" type="image/x-icon" href="/favicon.gif">
    <link rel="stylesheet" type="text/css" href="/style.css">
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

下拉菜单CSS:

    .topnav {
  overflow: hidden;
  background-color: #502f2f;
  font-size: 20px;
  font-family: 'Press Start 2P', serif;
  text-shadow: 2px 2px 2px #442828;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.topnav a {
  float: left;
  display: block;
  color: #e794ad;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.visited {
  color: #e794ad;
  text-decoration: none;
}

.active {
  background-color: #502f2f;
  color: #d69494;
  text-decoration: none;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 20px;    
  border: none;
  outline: none;
  color: #e794ad;
  padding: 14px 16px;
  text-shadow: 2px 2px 2px #442828;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #502f2f;
  color: #efdec6;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #efdec6;
  font-size: 14px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #502f2f;
  color: #d69494;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #502f2f;
  color: #c6e7e7;
  text-decoration: none;
}

.dropdown-content a:visited {
  background-color: #502f2f;
  color: #efdec6;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: none;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;
  display: block;}
  .topnav.responsive .icon {display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

对index.html的修正根网址不正确

html

css

回答 1

Stack Overflow用户

发布于 2022-07-15 21:57:52

我的CSS不正常，我的其他链接样式正在覆盖我的.下拉内容a:悬浮样式。我需要将我的.下拉内容a:悬停样式移到我的其他链接样式下面，并将我的链接样式按重要性顺序从下往上排序。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72988989

复制

相似问题

问CSS链接颜色呈现方式与根URL上的index.html不同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS链接颜色呈现方式与根URL上的index.html不同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS链接颜色呈现方式与根URL上的index.html不同
EN