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

道格拉斯·霍尔

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

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

我的网站

代码:

@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,它将覆盖您的选择器。因此,我们可以比较一下两者的具体权重。

另一个示例中查看此答案


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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我的状态仍然为null,尽管我的Firebase代码是100%正确(反应)

来自分类Dev

尽管我使用 e.preventDefault(),但选项卡的默认操作不是停止事件

来自分类Dev

视图未附加到窗口管理器:尽管我有预防代码

来自分类Dev

视图未附加到窗口管理器:尽管我有预防性代码

来自分类Dev

Java以新数组作为输入,尽管我两次给出了源代码

来自分类Dev

不管我怎么努力,Deluge都会不断提出问题

来自分类Dev

我的代码出了点问题

来自分类Dev

我的代码出了点问题

来自分类Dev

我的 AngularJs 代码有问题

来自分类Dev

我的代码有缩进问题

来自分类Dev

我在代码块中添加了一行代码,尽管我得到的答案是正确的,但我不明白那行代码能做什么

来自分类Dev

css滚动不断出现,尽管我增加了高度

来自分类Dev

在家托管我的网站

来自分类Dev

尽管我从参考中获得了相同的代码,但我无法使网站显示其内容

来自分类Dev

谁能告诉我这个CSS代码有什么问题吗?

来自分类Dev

无法找出我的代码有什么问题,Javascrips/html/css

来自分类Dev

如何正确导入 CDN,我的代码包含 CSS 和 jQuery CDN 有什么问题?

来自分类Dev

CSS(无)悬停问题(默认光标)

来自分类Dev

为什么不管我输入的密码和用户名如何,这段代码都重定向到a.php?

来自分类Dev

尝试在Heroku上托管我的其余api(node.js)时如何解决此问题?

来自分类Dev

bash隐藏默认的stderr代码并用我自己的代码替换

来自分类Dev

我的代码存在什么安全问题?

来自分类Dev

Scheme:我的代码有什么问题?

来自分类Dev

我的SQL代码有什么问题?

来自分类Dev

我的算法/代码有什么问题?

来自分类Dev

我的代码有什么问题?

来自分类Dev

我的车辆代码有什么问题?

来自分类Dev

我的代码中的Python 3.1“ Else:”问题

来自分类Dev

试图了解我的代码中的问题

Related 相关文章

  1. 1

    我的状态仍然为null,尽管我的Firebase代码是100%正确(反应)

  2. 2

    尽管我使用 e.preventDefault(),但选项卡的默认操作不是停止事件

  3. 3

    视图未附加到窗口管理器:尽管我有预防代码

  4. 4

    视图未附加到窗口管理器:尽管我有预防性代码

  5. 5

    Java以新数组作为输入,尽管我两次给出了源代码

  6. 6

    不管我怎么努力,Deluge都会不断提出问题

  7. 7

    我的代码出了点问题

  8. 8

    我的代码出了点问题

  9. 9

    我的 AngularJs 代码有问题

  10. 10

    我的代码有缩进问题

  11. 11

    我在代码块中添加了一行代码,尽管我得到的答案是正确的,但我不明白那行代码能做什么

  12. 12

    css滚动不断出现,尽管我增加了高度

  13. 13

    在家托管我的网站

  14. 14

    尽管我从参考中获得了相同的代码,但我无法使网站显示其内容

  15. 15

    谁能告诉我这个CSS代码有什么问题吗?

  16. 16

    无法找出我的代码有什么问题,Javascrips/html/css

  17. 17

    如何正确导入 CDN,我的代码包含 CSS 和 jQuery CDN 有什么问题?

  18. 18

    CSS(无)悬停问题(默认光标)

  19. 19

    为什么不管我输入的密码和用户名如何,这段代码都重定向到a.php?

  20. 20

    尝试在Heroku上托管我的其余api(node.js)时如何解决此问题?

  21. 21

    bash隐藏默认的stderr代码并用我自己的代码替换

  22. 22

    我的代码存在什么安全问题?

  23. 23

    Scheme:我的代码有什么问题?

  24. 24

    我的SQL代码有什么问题?

  25. 25

    我的算法/代码有什么问题?

  26. 26

    我的代码有什么问题?

  27. 27

    我的车辆代码有什么问题?

  28. 28

    我的代码中的Python 3.1“ Else:”问题

  29. 29

    试图了解我的代码中的问题

热门标签

归档