css样式中遇到!important

html-css032

css样式中遇到!important,第1张

1、新建一个html代码页面。

2、创建一个input按钮标签，然后给这个按钮添加一个changeBg()的点击事件。

代码：<input type="button"   value="点击切换背景色" onclick="changeBg()"/>

3、创建style标签，然后创建一个class类为btn用于设置按钮样式，其中按钮的背景设置background-color:#009F95!important

代码：

<style type="text/css">

.btn{

border:1pxsolid#ddd

padding:5px8px

background-color:#009F95!important

}

</style>

4、给按钮input标签添加class="btn"。

代码：<input type="button" class="btn"  value="点击切换背景色" onclick="changeBg()"/>

5、引入jquery库，然后新建一个script标签，在这个标签里为changeBg()点击事件添加修改按钮的背景色。

changeBg()修改背景色代码：

functionchangeBg(){

$(".btn").css("cssText","background-color:red!important")

}

6、保存html代码页面后使用浏览器打开，点击按钮后发现按钮背景色被修改为红色。

CSS 不起作用

有些css不起作用，难道是跟php有关？

php部分：

PHP code

if($auth==true)

{

echo "<tr>"

echo "<td class='block_link' id='block_link'><div style='width:100%overflow:hiddentext-align:leftfont-size:8.5pt'>You have</div><div style='width:100%overflow:hiddentext-align:rightfont-size:27.5pt'>$$credit</div></td>"

echo "<td class='block_link'><a href="http://www.php1.cn/">

CSS部分

CSS code

.block_link a

{

width:120px

height:50px

display: block

background-color:#f1f1f1

text-align:center

font-size:10.5pt

text_decoration:none//去链接下划线不起作用

padding-top:30px

}

.block_link a:link, block_link a:visited //这里的a:visited 也不起作用

{

background-color: #f1f1f1

text_decoration:none//去链接下划线不起作用

color:#009EDD

}

.block_link a:hover

{

background-color: #009EDD

text_decoration:none//去链接下划线不起作用

color:#ffffff

}

#block_link

{

background-color:#d34836

color:#ffffff

width:120px

}

这到底是怎么回事？

------解决方案--------------------

text-decoration

不是 _

------解决方案--------------------

text-decoration:none

你的呢？

text_decoration:none

不要把罪过都推给 php

说实在的，php 已经承担了太多的压力了