详解解读CSS样式中的!important、*、_符号

这篇文章主要介绍了详解css样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

详解CSS样式中的!important、*、_符号

!important、*、_其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的。

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义

首先,先看下面一段代码:

立即学习“前端免费学习笔记(深入)”;

        !Important       

呵呵

“呵呵”两字被定义了两个color,原本在color:red在color:blue之后,这两字应该是红色的,默认取最接近字体的颜色
但是color:blue之后添加了!important,导致color:blue的优先级最高,“呵呵”两字应为蓝色,具体效果如下:

详解解读CSS样式中的!important、*、_符号

然而,IE6并不能识别style属性中的!important符号,所以导致还是按原来的样式优先级,把“呵呵”两字搞成了红色。

css样式中的!important、*、_符号,皆是用来设置优先级的,但是这些符号,仅在特定的浏览器中适用,具体如下:

IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important;

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

下划线”_”, IE6支持下划线,IE7和firefox均不支持下划线。

因此,可以在style属性中定义如下属性,来区分IE6,IE7,firefox:

background:orange;*background:green;_background:blue;

还可以这样来区分IE6,IE7,firefox:

background:orange;*background:green !important;*background:blue;

如下的代码:

        !Important       

区分IE7、IE8、火狐

区分IE7、IE8、火狐

其运行效果如下:

(1)IE7

详解解读CSS样式中的!important、*、_符号

(2)IE8及其以上的浏览器,含火狐等。

详解解读CSS样式中的!important、*、_符号

(3)IE6

详解解读CSS样式中的!important、*、_符号

然而,这样的区别,仅能够自己用于调试,真正的前端编程还是应该利用JavaScript对浏览器的标识判断,来判断这些浏览器的类型。

最后再补充一句,其实IE6仅仅是不能识别style中的!important,如果代码如下所示:

        测试Css中的!Important区别         .testClass{      color:blue !important;     }        

测试Css中的Important

无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详解解读IE6中的position:fixed问题

前端获取http状态码400的返回值实例_基础教程

JavaScript在IE9之前版本中内存泄露问题(详细总结)

以上就是详解解读CSS样式中的!important、*、_符号的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546198.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:57:53
下一篇 2025年12月13日 12:09:38

相关推荐

  • html+css+js下拉列表小三角

    本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助。 gadf.zijisanjiclass{ width: 220px;border: 1px solid rgba(0,0,0,.15);background-color: #fff;padding: 10…

    好文分享 2025年12月21日
    000
  • HTML5+CSS3应用详解

    这篇文章主要介绍了关于html5+css3应用详解,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧 Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不…

    好文分享 2025年12月21日
    000
  • CSS实现大型下拉菜单步骤详解

    这次给大家带来CSS实现大型下拉菜单步骤详解,CSS实现大型下拉菜单的注意事项有哪些,下面就是实战案例,一起来看一下。 这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作,没有任何js代码,不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。 HTML结构 该大型菜单…

    好文分享 2025年12月21日
    000
  • CSS与媒体查询实现网页导航功能(附代码)

    这次给大家带来CSS与媒体查询实现网页导航功能(附代码),CSS与媒体查询实现网页导航功能的注意事项有哪些,下面就是实战案例,一起来看一下。 附上效果图,如果大家感觉不错,请参考实现代码:  代码如下,复制即可使用: Document body { background: #801638; } bo…

    2025年12月21日 好文分享
    000
  • css操作控件实现disable效果

    这次给大家带来css操作控件实现disable效果,css操作控件实现disable效果的注意事项有哪些,下面就是实战案例,一起来看一下。 用js的event可以用来阻止input,select,checkbox的默认事件,如 event.preventDefault()event.stopProp…

    好文分享 2025年12月21日
    000
  • CSS3二级导航菜单制作步骤详解

    这次给大家带来CSS3二级导航菜单制作步骤详解,CSS3二级导航菜单制作的注意事项有哪些,下面就是实战案例,一起来看一下。 如果想要实现网页的二级导航,我们可以使用JS技术,动态的显示和隐藏二级菜单,当然也可以使用CSS技术来实现。并且这里推荐使用CSS,因为其效率更高,更流畅。这里将介绍二级菜单的…

    2025年12月21日
    000
  • CSS3做出多样边框特效

    这次给大家带来CSS3做出多样边框特效,CSS3做出多样边框特效的注意事项有哪些,下面就是实战案例,一起来看一下。 半透明边框 实现效果: 实现代码: 你能看到半透明的边框吗?p { /* 关键代码 */ border: 10px solid rgba(255,255,255,.5); backgr…

    2025年12月21日 好文分享
    000
  • 总结HTML/CSS中的特殊字符

    HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就随时可以查到这些特殊字符的表示方法。 简单的介绍一下其使…

    好文分享 2025年12月21日
    000
  • HTML与CSS中背景相关属性

    这次给大家带来html与css中背景相关属性,使用html与css中背景相关属性的注意事项有哪些,下面就是实战案例,一起来看一下。 一. 背景尺寸属性 1.什么是背景尺寸属性 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小 background-size:xxxx; 取值: 1.…

    好文分享 2025年12月21日
    000
  • css3实现条状百分比效果

    这次给大家带来css3实现条状百分比效果,实现css3实现条状百分比效果的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图就是上方所示了,整个长条表示100%,绿色的部分表示该条目占比,鼠标移到该长条上时,显示百分比(title属性设置)首先这个百分比,你要计算出来。该条状,我用的是Labe…

    2025年12月21日
    000
  • 几种关于html和css的使用方法

    本文主要和大家介绍了几种关于html和css的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 html使用方法篇 一:颜色代码 如果你想使用某种颜色,取得它的颜色值即可。比如,您想改变某些文字的颜色,您可以使用下面的代码:改变#符号后的代码即…

    好文分享 2025年12月21日
    000
  • css中id选择器的命名规则有哪些

    这次给大家科普一下css中id选择器的命名规则有哪些,给CSS中ID选择器命名的时候有哪些注意事项,下面就是总结,一起来看一下。 大小写敏感 只能包含[a-zA-Z0-9]、-,,其中不能以、-、0-9开头 在CSS的命名规范中,名称不能以数字开始,只能以字母、连字符、下划线开始。之后可以是字母、连…

    好文分享 2025年12月21日
    000
  • HTML与CSS中的过渡模块

    这次给大家带来HTML与CSS中的过渡模块,HTML与CSS中过渡模块的注意事项有哪些,下面就是实战案例,一起来看一下。  a标签的伪类选择器  a标签 1.通过我们的观察发现a标签存在一定的状态 1.1默认状态, 从未被访问过 1.2被访问过的状态 1.3鼠标长按状态 1.4鼠标悬停在a标签上状态…

    2025年12月21日
    000
  • HTML与CSS中2D转换模块

    这次给大家带来html与css中2d转换模块,html与css中2d转换模块的注意事项有哪些,下面就是实战案例,一起来看一下。 一. 2D转换模块 2D转换模块 立即学习“前端免费学习笔记(深入)”; /*其中deg是单位, 代表多少度*/ transform: rotate(45deg);/*第一…

    2025年12月21日 好文分享
    000
  • HTML与CSS中的动画模块

    这次给大家带来html与css中的动画模块,使用html与css中的动画模块注意事项有哪些,下面就是实战案例,一起来看一下。 一. 动画模块 1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画 立即学习“前端免费学习笔记(深入)”; 1.2相同…

    好文分享 2025年12月21日
    000
  • HTML与CSS中的3D转换模块

    这次给大家带来html与css中的3d转换模块,使用html与css中的3d转换模块注意事项有哪些,下面就是实战案例,一起来看一下。 文中的img标签![](images/jacky/xin.png) 全部变成了macdown格式 一. 什么是2D和3D 1.什么是2D和3D 2D就是一个平面, 只…

    2025年12月21日
    000
  • 怎样用CSS3制作登录框

    这次给大家带来怎样用css3制作登录框,用css3制作登录框的注意事项有哪些,下面就是实战案例,一起来看一下。 作为一个新手,个人觉得难点在:1.阴影的使用(外框,账户栏,密码栏,button)2.账户栏,密码栏的布局3.button颜色渐变下面给出一些思路,也希望大家提供一些简洁的方法帮助更多的新…

    2025年12月21日
    000
  • CSS常见样式

    这次给大家带来css常见样式,使用css常见样式的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS Sprite(雪碧图)指什么? 有什么作用 CSS雪碧图 即CSS Sprite,也有人叫它CSS精灵图,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的…

    好文分享 2025年12月21日
    000
  • 用HTML+CSS做一个实时预览的markdown编辑器

    这次给大家带来用html+css做一个实时预览的markdown编辑器,用html+css做一个实时预览的markdown编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。 第一步 搭建布局: 1.构思布局(以下是总体布局) 2.项目下新建个index.html页面,写入以下代码: 立即学习“…

    2025年12月21日
    000
  • CSS布局之盒子模型属性

    这次给大家带来CSS布局之盒子模型属性,CSS布局的盒子模型属性的注意事项有哪些,下面就是实战案例,一起来看一下。 宽高width/height   在css中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;   如果…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信