整理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>

Answer 2

我们的想法是将常规属性移动到公共.selector。 并根据需要覆盖唯一属性。

像这样：https://jsfiddle.net/Stafox/qrv2h9k5/1/