精通CSS version2笔记之⒈选择器 - 周起

php中文网
发布: 2016-05-21 08:42:27
原创
1494人浏览过

1.常用的选择器:
①元素选择器   指定希望应用样式的元素.比如:p {color:#fff;}
②后代选择器   寻找特定元素或者元素的后代. 比如:body p{color:#ccc;}   这个选择器和子选择器body>p的区别是:body>p是指body下作为子元素的所有节点p,而后代选择                    是body下面所有的节点p,可以说子元素选择器是一种特殊的后代选择器。

 ③类选择器  指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据它用作什么而不是表现什么来命名。如果在文档中添加了许多不必要 的类,那么这可能是文档结                      构不合理的信号。最好根据祖先选择器的后代选择器来选定。
④伪类选择器根据文档结构之外的其他条件对元素应用样式 比如:a:hover{color:red},    :link    :visited称为链接伪类,只能用于锚元素,而:hover :active :focus称为动态伪                    类,理论上可以应用于任何元素,这些伪类可以层叠,创建更复杂的行为                      
⑤通用选择器匹配所有可用元素应用样式(相当于全选),由一个*表示,它可以用来对某个元素的所有后代应用样式,或者跳过一级的后代。
⑥高级选择器之子选择器:如前文  略。
⑦相邻同胞选择器  选取同一个父元素下某个元素之后的第一个同级兄弟元素。可以认为是和JS中的:after选择一个效果

 比如 p+div{color:#00f;}就可以实现应用样式

 ⑧属性选择器可以根据属性的值来寻找元素  比如acronym[title='practise']{bgc:blue;}寻找拥有title属性且值为practised元素应用样式

ps:为了避免样式过分混乱,尽量保持一般样式非常一般,特殊样式非常特殊

立即学习前端免费学习笔记(深入)”;

继承是指应用样式的元素的后代会继承样式的某些属性,可以通过设置父元素的一般样式来避免子元素标签的过分使用。

现在样式表最常见的是链接样式,这样方法比导入方法快,使用结构良好的单一CSS文件可以显著提高下载速度,但是可以根据实际情况,尽量使代码美观不混乱。

                          代码的结构设计(!important)

                             为了便于维护,最好将样式分块

                          1.一般样式

                                     ⑴主体样式

                                     ⑵reset样式

                                     ⑶链接

                                     ⑷标题

                                     ⑸其他元素

                          2.辅助样式

                                     ⑴表单

                                     ⑵通知和错误

                                     ⑶一致的条目

                           3.页面结构

                                     ⑴标题、页脚、导航

                                     ⑵布局

                                     ⑶其他页面结构元素

                            4.页面组件

                                     各个页面

                             5.覆盖样式

               在需要的地方加上注释是一种良好的习惯                          

 

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号