css - 为什么我的 CSS 用于删除类上的 border-right 被忽略？

Question

在我的代码中，我在所有 li 元素上设置了 border-right。当 li 元素处于事件状态时，我正在尝试使用自己创建的名为 active 的类来摆脱 border-right。问题是我的类(class)没有删除右边框。

这也是代码的 JSFiddle:http://jsfiddle.net/t0a4j5tq/2/

div#navbar {
	width: 250px;
	height: 550px;
	float: left;
}

div#navbar > ul {
	text-align: center; 
	background-color: #EEE;
}

div#navbar > ul > li.li, div#navbar > ul > li.liLast {
	list-style-type: none;
	border-bottom: 1px solid black; 
	border-right: 1px solid black;
	font-size: 25px;
	font-family: Algerian, "Times New Roman";
}

div#navbar > ul > li > a {
	color: black;
	text-decoration: none;
	display: block;
	width: 100%;
	padding: 38px 0;
	
	-webkit-transition: margin-left 0.5s;
}

div#navbar > ul > li > a:hover {
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 5px black;
	margin-left: 5px;
}

li.active {
    box-shadow: inset 3px 3px 10px #333;
    border-right: none;
}

<div id="navbar">
	<ul>
		<li class="li active"><a href="index.html">Start</a></li>
		<li class="li"><a href="./undersidor/omMig.html">Om mig</a></li>
		<li class="li"><a href="./undersidor/vision.html">Vision</a></li>
		<li class="li"><a href="./undersidor/tjanster.html">Tjänster</a></li>
		<li class="liLast"><a href="./undersidor/kontakt.html">Kontakt</a></li>
	</ul>
</div>

Answer 1

问题的根源是 CSS Specificity .理解这一点很重要，因为在您的代码中简单地使用 !important 是一种 hack，如果您忘记将它放在那里，可能会导致您以后遇到问题。

!important 覆盖一切，因此显然不应该使用，除非在可怕的、不得已的情况下(即便如此，许多人 [包括我自己] 会争辩说你应该弄清楚如何解决问题，而不是使用 !important)。

在您的代码的前面，您有一个用于相同元素(和类似元素)的 CSS 选择器:

div#navbar > ul > li.li {

现在，您正试图通过以下方式访问同一元素:

li.active {

但第一个选择器方式更多specific .相反，您应该使用以下 CSS 选择器，没有 !important hack:

div#navbar > ul > li.active {