首页 > Web开发 > 详细

css选择器分类与作用

时间:2014-04-10 07:53:20      阅读:665      评论:0      收藏:0      [点我收藏+]

本文旨在总结css中各种选择器及其相应用途(持续更新)

 


通配符(全局)选择器

样式:*{}

示例:

bubuko.com,布布扣

总结:选定文档中所有类型的对象,如图所示写在css样式文件开头用来定义全局通用的一些属性。font-family:定义三种基本的字体类型;marginpadding:将内外边距归零,以防与之后样式发生冲突;

font-size:定义基本字号。

 

元素(类型)选择器

样式:E{}

示例:

首先编写如下内容:三段文字用了不同的类型定义

bubuko.com,布布扣

然后用元素选择器对需要的类型加上红色效果:

bubuko.com,布布扣

显示结果:

bubuko.com,布布扣

 现将元素类型从P修改为h3

bubuko.com,布布扣

显示结果:

bubuko.com,布布扣

总结:不仅仅是文字,任何元素类型都可以用该选择器查找,读者可以尝试其他类型的效果。类型选择器在css样式中使用程度非常高,通常与其他类型选择器嵌套使用,复合型元素查找后文会给出心得。

 

id选择器

样式:#(id名){}

示例:

这次三段文字定义相同类型,不同的是给他们加上不同的id:

bubuko.com,布布扣

给要选中的文字加上金黄色效果:

bubuko.com,布布扣

显示结果:

bubuko.com,布布扣

接下来我们想去选中第三段文字:

 bubuko.com,布布扣

显示效果:

bubuko.com,布布扣

总结:需要牢牢记住的是一个id在一个样式文档中只能存在一个,重复的话程序会报错。正是由于id的这种唯一性,在选择元素时复合选择器的最外层通常运用父级最近的id名。id选择器在html文件中不易定义过多,通常在编写页面时定义较大的块级,诸如:header、showcase、mainbody、sidebody、bottom、footer等。

 

包含(后代)选择器

样式:A B{}

示例:现在把三段文字装进一个div盒子里:

bubuko.com,布布扣

想要选中第一段文字:

bubuko.com,布布扣

显示结果:

bubuko.com,布布扣

总结:后代选择器样式中两类型名中间用空格隔开,级别从左到右递减(爷在左 孙在右),可以不必逐级选择(爷 父 孙),在确定元素不会查找出错的情况下可以简写(爷 孙)。

css选择器分类与作用,布布扣,bubuko.com

css选择器分类与作用

原文:http://www.cnblogs.com/ghost-xyx/p/3655592.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!