如何在类应用效果时删除：对特定id的效果

Question

您将在下面的代码段中看到我正在尝试将“获取报价”转换为更多按钮样式。每当我向此元素navInverse添加填充时，它会导致背景颜色的运行到下一行。我也试图让:after效果不会发生在navInverse对象上。后效应当前在按钮下面放了一条红线。

如果我将以下代码添加到navInverse，它看起来如下图所示。这就是我想要显示按钮填充的方法，减去被推到底部的重叠部分。

另外，我无法弄清楚为什么navInverse颜色不会显示为白色。我把它编码为

color:#FFF;
vertical-align: middle;
padding: 10px 12px;

有人看到我做错了吗？

Jsfiddle

nav {
	background: #FFF;
	height: 70px;
	width: 100%;
	max-width: 100%;
	box-shadow: 1px 1px #E5E5E5;
	position: fixed;
	top: 0;
	z-index: 999;
	box-sizing: border-box;
}
#nav-logo {
	float: left;
	height: 100%;
	width: auto;
	display: block;
	position: relative;
	margin-left: 5%;
}
#nav-logo img {
	height: 80%;
	width: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#nav-list li {
	display: inline-block;
	margin: 0 17px;
}
#nav-list li:first-child {
	margin-left: 0px;
}
#nav-list li:last-child {
	margin-right: 0px;
}
#nav-list li a {
	text-decoration: none;
	font-family: 'Muli', sans-serif;
	font-size: .9rem;
	/*color: #4b4b4b;*/
	color: #747678;
	letter-spacing: 1px;
	vertical-align: middle;
	transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:after {
	content: '';
    display: block;
	width: 0;
	margin-top: 6px;
	background: #BE1E2D;
	height: 2px;
	transition: width .3s;
}
#nav-list li a:hover {
	color: #4b4b4b;
	transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after {
    width: 100%;
    transition: width .3s;
}
#navInverse {
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.4rem;
	color: #FFF;
	background: linear-gradient(to right bottom, #BE1E2D, #981824);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
#navInverse:after {
	content: '';
    display: none;
	width: 0px;
	height: 0px;
	transition: none;
}

<nav>
	<div id="nav-logo">
		<a href="/"><img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/logoBR.png" alt="MB Kit Systems"></a>
	</div>
	<div id="mobile-button"><img src="" class="hidden" alt=""></div>
	<div id="nav-pop">
	<div id="nav-pop-close"></div>
		<ul id="nav-list">
			<li><a href="about">ABOUT</a></li>
			<li><a href="services.php">SERVICES</a></li>
			<li><a href="services">DESIGN</a></li>
			<li><a href="contact.php">CONTACT</a></li>
			<li><a href="contact.php" id="navInverse">GET A QUOTE</a></li>
		</ul>
	</div>
</nav>

Answer 1

你需要增加选择器特异性，常规选择器（#nav-list li a）作为3的特异性，但覆盖选择器（#navInverse）有1，所以它被覆盖。

提高选择器特异性的一种方法是使其成为#nav-list li a#navInverse。

我不确定这是你想要的结果，但这是有效的。

＆＃13;

＆＃13;

nav {
  background: #FFF;
  height: 70px;
  width: 100%;
  max-width: 100%;
  box-shadow: 1px 1px #E5E5E5;
  position: fixed;
  top: 0;
  z-index: 999;
  box-sizing: border-box;
}

#nav-logo {
  float: left;
  height: 100%;
  width: auto;
  display: block;
  position: relative;
  margin-left: 5%;
}

#nav-logo img {
  height: 80%;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

#nav-list li {
  display: inline-block;
  margin: 0 17px;
}

#nav-list li:first-child {
  margin-left: 0px;
}

#nav-list li:last-child {
  margin-right: 0px;
}

#nav-list li a {
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: .9rem;
  /*color: #4b4b4b;*/
  color: #747678;
  letter-spacing: 1px;
  vertical-align: middle;
  transition: all .3s;
  -webkit-transition: all .3s;
}

#nav-list li a:after {
  content: '';
  display: block;
  width: 0;
  margin-top: 6px;
  background: #BE1E2D;
  height: 2px;
  transition: width .3s;
}

#nav-list li a:hover {
  color: #4b4b4b;
  transition: all .3s;
  -webkit-transition: all .3s;
}

#nav-list li a:hover:after {
  width: 100%;
  transition: width .3s;
}

#nav-list li a#navInverse {
  border-radius: 2px;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
  font-size: 1.4rem;
  color: #FFF;
  background: linear-gradient(to right bottom, #BE1E2D, #981824);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

#navInverse:after {
  content: '';
  display: none;
  width: 0px;
  height: 0px;
  transition: none;
}

＆＃13;

<nav>
  <div id="nav-logo">
    <a href="/"><img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/logoBR.png" alt="MB Kit Systems"></a>
  </div>
  <div id="mobile-button"><img src="" class="hidden" alt=""></div>
  <div id="nav-pop">
    <div id="nav-pop-close"></div>
    <ul id="nav-list">
      <li><a href="about">ABOUT</a></li>
      <li><a href="services.php">SERVICES</a></li>
      <li><a href="services">DESIGN</a></li>
      <li><a href="contact.php">CONTACT</a></li>
      <li><a href="contact.php" id="navInverse">GET A QUOTE</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;