小技巧：CSS 选择符有哪些？如何合理运用？

　　CSS selector 选择符是我们进行CSS网页布局的基础。CSS selector到底有哪些，如何合理的运用呢？选择符可以分为三类，除了第一类HTML selector之外，其它两类我们是可以自己命名的，在进行命名时，注意包含语义，或者添加必要的注释，使我们的代码更清晰，易读。

　　HTML selector 标签选择符

　　HTML selector就是HTML的标签，如：DIV，TD，P，H1等等，如你用 CSS 定义了它们，在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示。

　　比如我们想叫H1的颜色是红的，则：H1 {color: red}。这里我们学习一个CSS的特点，它可定义好几个 selector在一个rule里。如：H1, H2, TD {color: red}。这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色。在具体使用中，可以将几个设置相同的属于合并起来编写，减小我们的代码。

　　Class selector 类选择符

　　Class selector有两种，一种叫相关 class selector，它跟一个 HTML 的标签有关系它的语法是tag.Classname {property:value}。如：我们想设置一些而不是全部 H1 的颜色是红的 H1.redone {color: red}则：第一个 H1 是红色的，而第二个就不是了。

　　第二种是独立class selector。它可被任何 HTML标签所应用。它的语法如下 .Classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的标签中去。非常明显class selector 给了我们更多的自由与发挥的空间。

　　ID selector ID选择符

　　ID selector 其实跟独立 class selector 的功能很相似。而区别在于它们的语法和用法不同，以及对于 javascript 操纵 HTML元素有帮助。我们在布局中，对不同的结构区域的定义，往往用ID选择符。

　　它的语法如下#IDname {property:value}。假如我们有下面的定义#yelowone {color: yellow}。我们可以运用这个定义到任何的有同样 ID 名字的标签，如：text here你可能觉得既然 ID selector 和独立 class selector 功能一样，为什么两者都存在呢？有 ID 的 HTML元素可以被JavaScript来操纵。

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有