html - 整理 CSS 代码

Question

我的网站有一个 .css 文件，它为侧边导航栏设置所有格式。唯一的问题是它看起来很乱而且效率似乎很低，因为我不得不一次又一次地复制相同的代码，只是为了在弹出的每张幻灯片中更改一个或两个值。我想知道如何让它更整洁、更高效。

这是相关的 CSS 代码的样子

nav {
    display: block;
    color:white;
    border:2px;
    border-color:aqua;
    border-style:solid;
    border-right-style:none;
    padding:10px;
    text-transform: uppercase;
}

/*First nav box*/

#topnav {
    top: 100px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:white;
    border-bottom-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#topnav:hover span {display:none}

#topnav:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    color:white;
}

#topnav:hover:before {
    content:"Top";
}

/*Second nav box*/

#nav2 {
    top: 140px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:red;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav2:hover span {display:none}

#nav2:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav2:hover:before {
    content:"Red";
}


/*Third nav box*/

#nav3 {
    top: 180px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:blue;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav3:hover span {display:none}

#nav3:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav3:hover:before {
    content:"blue";
}

/*Fourth nav box*/

#nav4 {
    top: 220px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:green;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav4:hover span {display:none}

#nav4:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav4:hover:before {
    content:"green";
}

/*Fifth nav box*/

#nav5 {
    top: 260px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:purple;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav5:hover span {display:none}

#nav5:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav5:hover:before {
    content:"purple";
}

/*Sixth nav box*/

#nav6 {
    top: 300px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:orange;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav6:hover span {display:none}

#nav6:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav6:hover:before {
    content:"orange";
}

/*Bot nav box*/

#botnav {
    top: 340px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:white;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#botnav:hover span {display:none}

#botnav:hover {
    width:3cm;
    background-color:black;
    border-top-style:solid;
    color:white;
}

#botnav:hover:before {
    content:"200";
}

这里还有一个 JSFiddle用实践中的代码向您展示它的样子。另外，如果我需要更改 HTML 以使 css 更高效，请告诉我。

感谢您的帮助

编辑

所以基于Darren's answer和 Stafox's answer ，我已经将代码压缩到这个。

nav {
    display: block;
    color:white;
    border:2px;
    border-color:aqua;
    border-left-style:solid;
    padding:10px;
    text-transform: uppercase;
    right: 0px;
    position: fixed;
    z-index: 3000;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#topnav:hover, #nav2:hover, #nav3:hover,
#nav4:hover, #nav5:hover, #nav6:hover,
#botnav:hover {
    z-index:5000;
    width:3cm;
    background-color:black;
    border-style:solid;
    border-right-style:none;
    color:white;
}

nav:hover span
{
    display:none
}

/*First nav box*/
#topnav {
    top: 100px;
    background-color:white;
    border-top-style:solid;
}

#topnav:hover:before {
    content:"Top";
}

/*Second nav box*/

#nav2 {
    top: 140px;
    background-color:red;
}

#nav2:hover:before {
    content:"Red";
}


/*Third nav box*/

#nav3 {
    top: 180px;
    background-color:blue;
}

#nav3:hover:before {
    content:"blue";
}

/*Fourth nav box*/

#nav4 {
    top: 220px;
    background-color:green;
}

#nav4:hover:before {
    content:"green";
}

/*Fifth nav box*/

#nav5 {
    top: 260px;
    background-color:purple;
}

#nav5:hover:before {
    content:"purple";
}

/*Sixth nav box*/

#nav6 {
    top: 300px;
    background-color:orange;
}

#nav6:hover:before {
    content:"orange";
}

/*Bot nav box*/

#botnav {
    top: 340px;
    background-color:white;
    border-bottom-style:solid;

}

#botnav:hover:before {
    content:"200";
}

这是一个JSFiddle它在使用中。

还有其他建议吗？

Answer 1

您可以将常见的导航元素分组到一个 CSS 类中。

例如，您的topnav、nav2、nav3、nav4 和nav5 都有以下共同点:

• 颜色
• 职位
• 过渡
• 对
• 边框
• 行高

因此，拥有具有这些样式的基本元素比重复它们可能更有意义。

.navigation-base {
    color: black;
    position: fixed;
    transition: 250ms all ease-out;
    right: 0px;
}

然后将 navigation-base 应用于所有导航元素，然后在它们不同的地方添加一个额外的类。

.navigation-unsuccessful {
   background-color: red;
}

.navigation-success {
   background-color: green;
}

<nav class="navigation-base navigation-success">
  <!-- Navigational components -->
</nav>