css样式表的优先级别演示

2016-02-19 18:28 2 1 收藏

今天图老师小编要向大家分享个css样式表的优先级别演示教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,
再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的CSS样式--
HTML
HEAD
STYLE
H1{color:red; }
.myclass{color:green}
H2.myclass{color:blue}
#myid{color:brown}
/STYLE
/HEAD
BODY
H1这是红色的一号标题。/H1
P class="myclass"使用了"myclass"伪类的P标签中的正文是绿色的。/P
H2 class="myclass"但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。/H2
P class="myclass" id="myid"以"myid"为标识的正文则是棕色的,这个是优先级别最高的。/P
/BODY
/HTML

来源:https://www.tulaoshi.com/n/20160219/1617830.html

上一篇：如何去掉Windows7系统视频加速
下一篇： CSS文本：layout-grid-line

看过《css样式表的优先级别演示》的人还看了以下文章更多>>

CSS样式表注释书写规范

标签： Web开发

总结了一下自己工作中使用到的注释书写规范，没有什么技术含量，只是用于统一制作方式，方便维护。包含了区域注释、单行注释、注释层级和协助注释四个部分。如果大家有其它的建议，欢迎留言。大部分同学使用的区域注释的方法，会以注释内容开始或注释内容结束、start或end等，相比之下，以S或E开始可以更快的使用，比如只要写一次开始或...

DreamWeaver中应用CSS样式表

标签： Web开发

一、去除超级链接的下划线以及在超级链接上实现鼠标悬停变色：在默认情况下，用DreamWeaver设计的网页中的超级链接都有下划线，看上去不大美观。要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码，其实在DreamWeave中很容易去除链接的下划线。首先在DreamWeaver的Document Windows中随便建立一个链接...

CSS样式表定义标签li前面样式

标签： Web开发

XHTML+CSS:调用样式表

标签： Html CSS布局 Div+CSS XHTML

web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用tabl...

CSS入门教程：关于CSS样式表

标签： Html CSS布局 Div+CSS XHTML

在学习中遇到问题可以到论坛发贴交流！本例为CSS入门系列教程，在这一课中我们将学习CSS的样式表，主要学习在学习css之前你应该掌握哪些基础知识，认识CSS以及如何使用CSS，希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之关于CSS样式表一.在学习css之前你应该掌握哪些基础知识 1.什么是网页，什么是超文本语言（html）...

查看更多精彩>>