我有一个问题,基本上我想这样做
.buttonar {
background-color: #4CAF50; /* Green */
border: none;
color: #FFF;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: #008CBA;
color: white;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: white;
color: black;
}
<a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate">button</a>
但问题是,我的网站已经有一个template.css
(Joomla网站),其中已经设置了a,a:link,a:hover等样式。我希望我的按钮看起来与代码片段输出完全一样,但我似乎无法使其工作,因为链接保持蓝色((几乎不可见)由模板设置)或者它只在我将鼠标悬停在链接本身而不是按钮(为:链接和a:hover创建了另一个类)。
有人可以帮我吗?
答案 0 :(得分:1)
&#39; C&#39;在CSS中代表Cascading。这意味着CSS将查看顶部的项目,然后当它沿着工作表向下时,它将覆盖它们。
这适用于如何将文件放入HTMl中:
<强> HTML 强>
<head>
<!-- Insert Joomla CSS here -->
<!-- Insert your custom CSS here -->
</head>
这将首先应用Joomla CSS,但随后您的自定义样式会覆盖它。
第二次阅读......
...如果您只谈论样式,.button2
会选择HTML中包含class="button2"
的元素。只需将HTML中的该类添加到您想要设置样式的按钮即可。
答案 1 :(得分:0)
您可以在按钮中内联您的样式,它将优先。
检查this。
答案 2 :(得分:0)
修复可能就像在你的CSS中添加!important一样简单。这会劫持级联规则,并应覆盖您的template.css规则。
此外,请确保在您放置自己的css规则的任何地方,将其放置在您的页面上调用template.css之后。将它放在头部标签中的任何位置可能是不够的。我首先要找出调用template.css的位置(通常在链接标记中)并在其后面放置一个带有!important标记的css。
有关此问题的信息:https://css-tricks.com/when-using-important-is-the-right-choice/
宋