- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在处理我的捐赠网站,我发现了一个问题,即默认的 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
}
最佳答案
浏览器根据其权重决定应用哪个 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/
提前感谢大家- 我还没有找到一种简单的方法来做到这一点,但是,是否可以接管写入 JspWriter 的数据(标题和所有内容)的处理?有点像动态管理缓冲区然后控制输出到 JspWriter 的联络员?由
我想接管音量调高和音量调低的过度输入。目前我的代码是: @Override public boolean onKeyDown(int keyCode, KeyEvent event) { Lo
我正在编写这个程序,我正在尝试在用户登录后显示辅助页面。我的第一个屏幕由 LoginInterfaceController 处理,如下所示。 @Controller public class Logi
我一直在为项目的一些新基础设施设置 CloudFormation 模板,并且已将其添加到 Route 53 托管区域。 现在理想情况下,我想创建一个包含我们所有托管区域和基本配置的“核心域”堆栈。问题
我同时使用 Facebook SDK 和 jQuery...出于某种原因,加载了 Facebook SDK,$不再作为 jQuery 对象工作。我所有的 jQuery 调用仍然有效,但我必须使用 jQ
我尝试使用 stopPropagation() 但没有运气。 我有这样的结构: 我有一个绑定(bind)到 Logo 的点击,它在其中附加了 img 元素,结果如下: 我想将点
(我在 Debian 8 上使用 Bash 4.4.12。问题也在 bash mailing list 中提出。) 请参阅以下步骤重现该问题。 来自 tty #1 (pts/2): [STEP 101
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在开发的 Android TV (ATV) 应用具有语音控制功能。基本上,当用户按下 Remote 上的麦克风按钮时,按键事件(由 KeyEvent.KEYCODE_SEARCH 标识)由应用处理
我有使用 iframe 显示外部内容的 Cordova 应用程序(在这种情况下是 youtube 嵌入式视频) 当单击 iframe 内的链接(如 youtube Logo )时,整个 webview
我正在尝试使用远程桌面协议(protocol)在 Ubuntu 15.04 上使用 Remmina 连接到 Windows 7 PC。哪个工作正常。 我遇到的唯一问题是我用作服务器状态监视器的 Win
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我关注了tutorial部署Redis主从部署。Slave和Master都有自己的服务。我有 Spring boot 应用程序,其配置中有主主机以保存/读取其中的数据。因此,当我终止 redis-ma
考虑这段代码(完全基于飞碟的“入门”代码,保留他们的权利): package flyingsaucerpdf; import java.io.File; import java.io.FileOutp
我是一名优秀的程序员,十分优秀!