CSS选择器
2015-06-21 22:57
633 查看
在这里主要总结了三个较为常用的选择器,熟练掌握这些选择器的使用,能够灵活地处理网页,作为初学者更要
理清他们的关系。
一、选择器类型
ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。
当地标记文档后,才能使用这些选择器
HTML标签选择器
决定哪些标签采用相应的CSS样式二、联系与区别
优先级
ID选择器>类选择器>HTML标签选择器区别
ID 选择器:“ # ” + 自定义类名类选择器:" . " + 自定义类名
HTML标签就是容器,可以存放代码,文字等。id选择器和类选择器可以嵌入到HTML标签中,也可以包含HTML
标签。
联系
文件角度
都是在页式文件中定义,在样式文件中完善。样式属性角度
基本上使用同一的属性,例如文本属性,背景属性,方框属性等三、应用
优先级比较
页式文件中代码样式文件中代码
从上图中可以看出,使用id选择器和使用类选择器分别定义了不同颜色,那么由于id选择器优先级较高,所以最
终会按照#spacial{}中定义的样式显示。
class类选择器中的优先级
在class类名中,用空格将类名menu 和类名niu 间隔开样式选择取决于类menu 和类niu在样式文件中排列顺序,排在最前面的优先级高。
HTML标签使用
例如:与类成父子关系的标签定义span标签中的文字样式,可以在样式文件中这样写,类和标签名用空格隔开。(父子关系)
四、小结
熟练操作这些常见的标签才能更好的开发网页,才能灵活自如地处理页面。在使用选择器的时候,还有很多处理技巧,这些技巧的应用在一定程度上优化了代码结构,代码的复用度高。我们需要多多积累一些这块儿的知识,并
能熟练应用。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- 表格标签table深入了解
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签