CSS调试技巧：a.class 与 a .class的区别，千万不能小看空格

使用图片精灵技术进行图片定位时会出现这个问题，有时候一个空格会导致很多问题

第一组

<a href="#"><span class="ico-manage">管理</span></a>

使用样式一：

a:hover{color:black}
a:hover.ico-manage{color:red;}

此时鼠标经过”管理“2字，颜色为黑色

使用样式二：

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

此时鼠标经过”管理“2字，颜色为红色

第二组

<a href="#" class="ico-manage">管理</a>

使用样式一：

a:hover{color:black}
a:hover.ico-manage{color:red;}

此时鼠标经过”管理“2字，颜色为红色

使用样式二：

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

此时鼠标经过”管理“2字，颜色为黑色

对于第一组的a与.ico-manage, .ico-manage属于span标签的，与a不同级；而对于第二组的a与.ico-manage, .ico-manage属于a标签的，即是与a同级，由此可得出一个结论：

1.当class为当前标签中一个属性时，则样式写为：标签+class名

2.当class为子标签的一个属性时，则样式写为：标签+空格+class名

原文地址：http://www.cnblogs.com/PeunZhang/archive/2012/05/08/2489156.html

转载于:https://www.cnblogs.com/hubbert123/p/6748434.html

CSS调试技巧：a.class 与 a .class的区别，千万不能小看空格相关推荐

css 浏览器调试中不可见_前端入门必会的初级调试技巧
本文仅仅针对前端初学者,目的是[用20%不到的时间] 学会[前端最常用的部分调试技巧],如果需要最详细的调试技巧,包括调试性能优化的相关知识,文末会补充最全的文档(chrome devtool的官方文 ...
前端：CSS/15/全局CSS设置,常用的兼容性调试技巧,CSSHACK
全局CSS设置 1,清除所有的标记的内外边距 body,ul,li,a,img,p,input{margin:0;padding:0;} 2,去除项目符号或编号前面的符号 ul,ol,li{list- ...
js_调试_01_14 个你可能不知道的 JavaScript 调试技巧
更快更高效地调试你的 JavaScript 了解你的工具在完成任务时有很重要的意义. 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了. ...
14个你可能不知道的JavaScript调试技巧
以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具在工作中发挥出更大的作用.尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug ...
chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧
本文是对常用的chrome调试技巧进行总结整理,如果你没有深入了解过chrome调试工具,此处总有你不知道的惊喜! 从 Chrome 说起对于大部分人来说,Chrome 可能只是个浏览器,但是对于开 ...
你不知道的Chrome调试技巧
你不知道的Chrome调试技巧 Chrome介绍 Chrome 是一款由 Google 公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包括 WebKit,目标是提升稳定性.速度和安全性,并创造出 ...
这10个实用的Javascript调试技巧，你知道吗？
见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们着急.因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点" ...
CSS实用技巧第一讲：文字处理
前言作为程序员的我们,书写代码也需要大量的技巧.一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满.因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新.容易理解.舒服自 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
ecshop 数据库调试技巧【强烈推荐】
ecshop 数据库调试技巧 [强烈推荐] 因为ecshop 吧数据库操作都方式在日志数组中了 print_r($_GLOBALS); 就可以看到全貌 Array ([GLOBALS] => A ...

CSS调试技巧：a.class 与 a .class的区别，千万不能小看空格

CSS调试技巧：a.class 与 a .class的区别，千万不能小看空格相关推荐

最新文章

热门文章