关于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表现都是一致的,都显示蓝色。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

两种方法用CSS实现背景图尺寸不随浏览器缩放而变化的代码

如何用CSS实现带阴影效果的黑色导航菜单效果

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:16:40
下一篇 2025年12月24日 01:16:47

相关推荐

  • 关于CSS样式中大于号的使用及Css中处理继承方法

    继承给我们的程序带来一定的困扰,所以认真的学习继承的原理,下面有个不错的示例,一个处理继承的一个方法,感兴趣的朋友可以参考下 继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。 在…

    好文分享 2025年12月24日
    000
  • a标签的css样式中的四个状态

    这篇文章主要介绍了关于a标签的css样式中的四个状态,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)…

    好文分享 2025年12月24日
    000
  • 关于DW在html中插入css样式的方法

    进行网页设计想要有一个好看的界面布局我们就得要使用到css样式,下为大家介绍dw在html中插入css样式方法,不会的朋友可以参考本文,来看看吧   在使用Dreamweaver CS6进行网页制作的时候,页面布局样式会很多。可以利用插入css样式将页面样式单独保存,以达到简化代码的目的。下面小编就…

    2025年12月24日 好文分享
    000
  • 详解CSS样式要全局定义的内容

    这篇文章主要为大家详解css样式要全局定义的内容的相关资料,需要的朋友可以参考下 /** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, …

    好文分享 2025年12月23日
    000
  • web前台css样式知识点详细介绍

    1. css样式的优先级   在html中使用css样式,很很多种方法 有外部引用方法 有 直接从head>标签中 写控制html的CSS样式语句 可以直接在想要控制的 标签当中直接写入css来控制 立即学习“前端免费学习笔记(深入)”; 优先级的话: 浏览器默认样式  最低 外部引用样式  …

    好文分享 2025年12月23日
    000
  • 详细介绍css常用效果总结

    font: 14px/26.6px ‘Microsoft Yahei’, ‘Trebuchet MS’, Georgia, ‘Times New Roman’, Times, sans-sercss有不少常用的效果,你在平时浏览…

    2025年12月23日
    000
  • 深入了解css样式之超出隐藏总结

    文本超出部分隐藏,总结两种方法。 1、单行隐藏 html代码 立即学习“前端免费学习笔记(深入)”; 当文字超过范围的时候,超出部分会隐藏起来。 css代码 .mi {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space:…

    好文分享 2025年12月23日
    000
  • 详解jQuery操作元素css样式的三种方法

    jquery里提供三种方法来改变页面元素的样式,虽然它们和传统方法的思想相通,但是却节省了许多代码 我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性…

    好文分享 2025年12月23日
    000
  • css样式图片、渐变、相关知识总结

    一,background-position:(图片定位) 三种写法: 1):按%比,左上角最小(0%,0%),右下角最大(100%,%100);2):(x,y)左上角最小(0,0),右下角最大(max,max);3)top,center,left,right,bottom; 二,background…

    好文分享 2025年12月23日
    000
  • CSS更改鼠标为手状样式介绍

    在自行设置的p或者其他标签中,为了更好的体验效果,会将在滑动过程中,将鼠标变为手势 简单总结下css对应的样式。 所在的p中,添加cursor:pointer即可。 示例: 手势变化区域 立即学习“前端免费学习笔记(深入)”; 对应的属性值还有如下: auto :标准光标 default :标准箭头…

    好文分享 2025年12月23日
    000
  • jimdo如何添加html5表单_jimdo表单html5代码嵌入与字段设置【实操】

    可通过嵌入HTML5表单代码、启用字段验证属性、添加CSS样式反馈及替换提交按钮并绑定JS事件四种方式在Jimdo实现自定义表单行为。 如果您在 Jimdo 网站中需要自定义表单行为或字段逻辑,而内置表单编辑器无法满足需求,则可通过嵌入 HTML5 表单代码实现更灵活的控制。以下是具体操作步骤: 一…

    2025年12月23日
    000
  • html如何调整_调整HTML元素大小与样式属性【大小】

    可通过CSS样式属性调整HTML元素尺寸与外观:一、内联style设宽高;二、class类名调用外部CSS;三、box-sizing控制盒模型;四、相对单位实现响应式;五、transform缩放视觉尺寸。 如果您需要修改网页中某个HTML元素的尺寸或外观,可以通过CSS样式属性直接控制其宽度、高度、…

    2025年12月23日
    000
  • html5怎么用flexbox排版_html5flex布局实现页面居中技巧【指南】

    Flexbox实现页面元素居中的核心是设置容器display: flex及对齐属性:一、单子元素用justify-content和align-items居中;二、多子元素用space-around等均分间距;三、用margin: auto使子元素绝对居中;四、响应式需结合媒体查询与flex-wrap…

    2025年12月23日
    000
  • html如何滑动_实现HTML页面或元素滑动效果【效果】

    可通过CSS scroll-behavior实现平滑锚点跳转,JavaScript scrollTo精确控制滚动位置,CSS transform模拟高性能滑动动画,或使用Swiper等第三方库实现触摸拖拽、循环播放等高级交互功能。 如果您希望在网页中实现页面或特定元素的滑动效果,可以通过CSS和Ja…

    2025年12月23日
    000
  • html5怎么引用图标_html5用iconfont或img标签引用图标文件显示【引用】

    HTML5图标显示异常可因路径错误、引用不当或字体未加载,解决方法包括:一、用iconfont类名引用;二、用Unicode字符引用;三、用img标签引用位图;四、内联SVG图标;五、预加载字体文件。 如果您在HTML5页面中需要显示图标,但图标无法正常加载或显示效果不符合预期,则可能是由于图标文件…

    2025年12月23日
    000
  • html表格标题如何写_编写HTML表格标题的正确标签【正确】

    HTML表格标题必须使用语义化的标签,置于内且在等元素之前;禁用–等非语义标签替代;可通过CSS的caption-side和text-align调整位置与对齐。 如果您在编写HTML表格时发现标题显示不正确或未被识别,则可能是由于使用了错误的标签或未遵循标准语义结构。以下是编写HTML表格标题的正确…

    2025年12月23日
    000
  • html5如何制作骰子_HTML5绘制骰子动画效果【骰子】

    需结合Canvas绘图API与JavaScript动画逻辑:一、创建Canvas并获取2D上下文,设背景与边框色;二、按点数1–6标准位置绘制圆点;三、用requestAnimationFrame实现滚动动画,60帧后定格;四、绑定点击/触控事件,添加视觉反馈与结果提示;五、适配移动端,优化触控响应…

    2025年12月23日
    000
  • 如何html背景_设置HTML页面背景颜色或图片【颜色】

    可通过五种CSS方法设置HTML背景:一、内联style设纯色;二、内部样式表设背景图并控制平铺定位;三、外部CSS文件设线性或径向渐变;四、CSS类名定制容器背景;五、data属性配合JS动态切换背景。 如果您希望为HTML页面设置背景颜色或背景图片,可以通过CSS样式实现。以下是几种常用且有效的…

    2025年12月23日
    000
  • html5怎么设置搜索框宽度自适应_html5width与响应式布局【步骤】

    实现搜索框宽度自适应需五种方法:一、width:100%配合box-sizing:border-box;二、Flexbox中设flex:1;三、CSS Grid划分轨道;四、width:100%加max-width限制;五、CSS变量联动JavaScript动态计算。 如果您在HTML5中使用搜索框…

    2025年12月23日
    000
  • html如何只开发html页面_专注于开发纯HTML页面技术【技术】

    纯HTML静态页面需禁用外部资源、内联CSS、JavaScript及非标准声明,仅用语义化标签和原生呈现标签,确保DOCTYPE、UTF-8编码与结构闭合性。 如果您希望构建一个仅包含HTML结构的静态页面,不引入CSS样式表或JavaScript脚本,则需严格遵循纯HTML语义化规范与内联限制原则…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信