默认 CSS 接管我的代码的问题

Question

我一直在我的捐赠网站上工作，我发现了一个问题，即默认的 Buycraft css 正在接管我正在写的 css。我对 css 非常陌生，我不打算在未来做太多，但现在我需要帮助。

当我检查我的导航栏元素时，它会为我提供一些 .navbar .nav > li > a 变量，例如颜色和文本阴影。我试图重新编写文本的代码，但无济于事。我完全按照 inspect element 的方式复制了它，我给了变量 !important 但没有任何变化。如果有人能告诉我导航栏按钮文本有什么问题，请帮助我。

我的website.

代码：

@import "http://fonts.googleapis.com/css?family=Oswald:400,300";

body {
  background:url(http://i.imgur.com/tYtIxao.jpg?1);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  padding:0;
  margin:0;
  height:100%
}

.navbar {
  background:#11CFD9;
  position:fixed;
  font-family:"Oswald";
  top:0;
  left:-5px;
  right:-5px;
  background-color:#11CFD9;
  color:#000!important;
  box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
  text-align:center;
  height:80px;
  display:block;
  padding-left:5%;
  padding-right:20%;
  z-index:10
}

.navbar-inner {
  background:#11CFD9;
  position:fixed;
  font-family:"Oswald";
  top:0;
  left:-5px;
  right:-5px;
  background-color:#11CFD9;
  font-size:x-large;
  text-align:center;
  display:block;
  padding-top:30px;
  padding-bottom:30px;
  padding-left:5%;
  padding-right:20%;
  z-index:10
}

.navbar .nav>li>a {
  float:none;
  padding:10px 15px;
  color:#000!important;
  text-decoration:none;
  text-shadow:0 0 0 #fff!important
}

.nav > li > a {
  display:block;
  color:#000!important
}

a {
  color:#08c;
  text-decoration:none
}

.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
  color:#fff;
  height:auto;
  text-decoration:none;
  background-color:#11CFD9;
  -webkit-box-shadow:inset 0 0 0;
  -moz-box-shadow:inset 0 0 0;
  box-shadow:inset 0 0 0
}

ul.nav a:hover {
  color:#fff!important;
  background:#1CDBE6
}

.box-container .basket-dropdown {
  padding:20px;
  margin-left:-145px;
  margin-top:2px
}

.basket-dropdown .checkout {
  float:right
}

.checkout {
  z-index:9999;
  font-family:Oswald;
  font-weight:300
}

.row {
  margin-left:20px;
  margin-right:20px
}

.box-container .checkout {
  width:98%!important;
  float:none!important
}

.span11 {
  width:98%;
  float:none!important
}

.box {
  background:url();
  border:0!important;
  margin-top:130px;
  position:relative;
  padding-right:25px;
  padding-left:25px;
  width:100%
}

.box-container {
  font-family:Oswald;
  font-weight:300;
  margin-right:5px;
  margin-left:5px
}

.box-container .checkout {
  width:90%;
  position:relative;
  float:left;
  z-index:0;
  top:0
}

.box-container .header {
  background-image:url(http://i.imgur.com/PzVJZ4V.png);
  background-color:#fff;
  border-top-left-radius:1px;
  border-top-right-radius:1px;
  -webkit-border-radius-topright:5px;
  -webkit-border-radius-topleft:5px;
  -border-radius-topright:5px;
  -border-radius-topleft:5px;
  height:33px;
  text-align:left;
  text-transform:uppercase;
  font-size:25px;
  padding-top:20px;
  font-family:Oswald;
  font-weight:300;
  border-radius:5px 5px 0 0
}

.box-container .content {
  opacity:.9!important
}

.span7 {
  width:60%;
  margin-left:20px;
  border-radius:10px
}

.span4 {
  width:25%;
  height:15%
}

.clear-fix {
  z-index:9999;
  top:0;
  opacity:.9
}

.logo {
  background:url();
  background-repeat:no-repeat;
  float:none;
  z-index:9999;
  position:fixed;
  left:25%;
  height:0!important;
  width:0!important
}

.logo span {
  opacity:0;
  color:#fff;
  font-size:0
}

em {
  color:red;
  font-weight:700;
  font-style:normal
}

/*Spinny Heads*/
.image {
  display:block;
  text-decoration:none;
  -webkit-transition:.5s all ease-in-out;
  -moz-transition:.5s all ease-in-out;
  -o-transition:.5s all ease-in-out;
  transition:.5s all ease-in-out
}

.image:hover {
  -webkit-transform:rotate(720deg) scale(1.5);
  -ms-transform:rotate(720deg) scale(1.5);
  -moz-transform:rotate(720deg) scale(1.5);
  -o-transform:rotate(720deg) scale(1.5);
  transform:rotate(720deg) scale(1.5)
}

.footer {
  height:60px;
  border-top:1px solid #000;
  background:orange;
  bottom:0;
  margin-right:0;
  margin-bottom:0;
  width:100%;
  z-index:99999;
  position:static;
  font-family:"Oswald";
  left:-5px;
  right:-5px;
  background-color:#11CFD9;
  color:#000!important;
  box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
  text-align:center;
  display:block
}

Answer 1

浏览器根据权重决定将哪个 css 选择器应用于其他选择器。通常你会发现 CSS specificity 一词描述了这一点。

在您的情况下，.nav > li > a 被解释为具有非常低的权重，因此被您的默认样式表覆盖。如果您删除这些选择器中的 > 符号，它应该仍然是相同的结果 - 因为您想要排除的导航栏中没有嵌套的 a 元素，对吧？

选择器 .nav li a 具有更大的权重，因此应优先。如果仍然没有帮助，请包含您的 Buycraft css 文件中的 css-选择器，它会覆盖您的选择器。所以我们可以对比一下两者的具体重量

看看 this answer here 的另一个例子。

一点背景知识：css 特殊性的存在是为了使类似以下的事情成为可能：想象一下，您网站上的链接应该始终显示为蓝色。但是在你的导航中，它们应该是黑色的。

a { color: blue; }
.navbar a { color: black; }

由于第二个选择器更具体，它优先于一般链接为蓝色的选择器，而您的导航链接为黑色。

默认 CSS 接管我的代码的问题

Issues with default CSS taking over my code

css

css-selectors

navbar

css-specificity