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

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

当我检查元素导航栏时，它会为.navbar .nav > li > a提供一些变量，例如颜色和文本阴影。我试图重新编写文本代码，但没有用。我完全像检查元素一样复制了它，并且给了变量！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
}

最佳答案

浏览器根据其权重决定将哪个CSS选择器应用于其他选择器。通常，您会找到描述这一点的术语CSS特异性。

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

选择器.nav li a的权重较大，因此应优先。如果仍然不能解决问题，请从Buycraft css文件中包含css-selector，它将覆盖您的选择器。因此，我们可以比较一下两者的具体权重。

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



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

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

由于第二个选择器更具体，因此它优先于常规链接-蓝色选择器，并且导航链接为黑色。

关于css - 默认CSS接管我的代码的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31642924/