标签：Web 样式 class 选择符 修炼 选择器 margin 前端开发 css
1.css命名加前缀---如:ad-time box-hb--这样辨识扩展度比较高
2.挂多个class还是新建class--多用组合，少用继承
3.如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类。
模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom
4.css设置的样式是可以层叠的---当不同选择符的样式设置有冲突时，会采用权重高的选择符设置样式。（html标签的权重是1，class的权重是10，id的权重是100）
如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。
为了保证样式容易被覆盖，提高可维护性，css选择符徐保证权重尽可能的低
5.css -----sprite
用两张图实现高亮，--没加载一个图片就会发送一次请求
合并一张大图，利用大图的背景移动实现高亮---background-position:0 -31px;
缺点：通过background-position进行定位--精确测量坐标，不利于维护
6.建议采用一行式css 编码风格
7.id和class
--同一个网页，相同的id只能出现一次，它不可重复，而class可以任意出现多次；
--id的css选择符权重为100，而class的选择符权重为10；
--原生js提供getElementById()方法，支持通过id对应到相关的HTMLLIElement,但不支持class；
8.CSS-hack(解决兼容性问题)
IE条件注释发--<!-- [if IE]><linck type="..."/><![endif]--> 只在IE下生效
<!--[if gt IE 6]><![endid]> 只在IE6以上版本生效
还可在--包裹style标签，script标签。。
选择符前缀hack法
样式属性前缀hack法
9.--解决超链接访问后hover样式不出现的问题
hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
标签：Web,样式,class,选择符,修炼,选择器,margin,前端开发,css 来源： https://www.cnblogs.com/fdxjava/p/11106779.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。