通常我们可以将CSS的优先级由高到低分为六组:
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
最低一级的选择器是为一个通配选择器,用*{margin:10px;}这样的类型来定义。
另外,可以用一句极为简单的话来描述CSS优先级问题:当一个CSS选择器拥有更多的高级别属性时,它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
,这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个,当然前者优先级会比较高。
如果想学习和交流更多html 前端开发的技术 你可以来我们这个群:先写下这三个数字:432,然后在写下中间这三个数字:664,最后写下的三个数字是:883,按照这个顺序连起来,群就会出现。还有更多的技术资料,学习课程。
CSS选择器是一个非常灵活的CSS属性,优雅的使用它会使你的页面代码不再臃肿,而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时,它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级:
1、位于
你写的这段代码,p标签首先会使用.red的样式,其次是使用p标签定义的样式
就是说如果p标签里面的样式与.red重复,那么会优先使用.red的样式,如果p标签的样式在.red里面没有,那么该样式对p标签有效。也就是css的继承,比如改写写代码:
优先级最高的最定是行内样式,然后就内联样式,最后就外联样式。
这三个样式定义知道不啦?
比如说
欢迎
你这段代码使用的是内部样式表来给元素添加样式,一般默认的情况下,带有!important修饰的样式具有最高优先级,其次是直接写在元素标签内的内联样式,再其次是内部或者外部样式表中的样式,然后是一些元素的默认样式,最后是通过继承得到的样式,对于id选择器和类选择器来说,id选择器的优先级高于类选择器,类选择器的优先级又高于元素名称选择器,所以在你写的这段代码里,你好和欢迎的大小都是14px,颜色都是红色,因为你好使用的是一级标题标签,你好的字体会加粗,另外,内部样式表推荐写在
标签内标签选择器
1
对标签p应用样式,效果图如下:
2
新建一个网页a.html,复制粘贴下面的代码:
这是一个段落,class="green",id="p1",设置p标签为红色
这是一个段落,class="green",id="p1",设置p标签为红色
这是一个段落,class="green",id="p1",设置p标签为红色