关于CSS specificity
CSS 
specificity 特性或称非凡性，它是衡量
个衡量CSS值优先级个标准，既然作为标准，就具
套相关判定规定及计算方式，specificity用个
位数字串(CSS2是
位)来表示，更像个级别，值从左到右，左面最
，级于级，数位之间没进制，级别之间
可超越。
Continue reading »CSS specificity优先级规则
Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.
CSS Specificity isn’t simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. You’ll understand the concept if you love Star Wars. Really.
Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources. Continue reading »CSS Specificity: Things You Should Know(转)
超链接的样式，例如 hover,visited,active样式 定义会出现没有实际效果的情况，实际上为了保证能看到不同状态下的连接样式,正确的样式顺序应该是：
” link – visited – hover – active “或” LVHA “(缩写)。
分析原因：
每个选择符selector都有一个“specificity” 权重，如果两个selectors应用于同一个元素,具有较高specificity的选择符将胜出，具有优先权。例如：
P.hithere {color: green;} /* specificity = 1,1 */
P {color: red;} /* specificity = 1 */
任何设置了类class＝hithere的段落内容显示为绿色而不是红色。两个selectors都设置了颜色，但是具有更高specificity的选择符将胜出。
伪类如何影响specificity呢？它们具有完全相同的加权值，下列样式具有相同的specificity加权值： Continue reading »超链接css样式优先级
下班回家，跟同事聊起来，何谓“高手”的话题，突然一句“你觉得自己是php高手吗？”，我随口答道，高手戴引号帽子的高手。呵呵O(∩_∩)O~！所以忽然想谈谈“高手”。
既有定义，高手必然存在，不是什么遥不可及的人。我们有幸还是可以达到滴。回到编程，PHP高手上来，或者C++、C、Java等等编程语言来，高手跟我们的区别还是蛮大滴。平常我们一直挂在口头，每每开会总会捎带着，信誓旦旦 “可读性、可维护性、接口良好性、可移植性、通用性、高效性”其实都是些，说起来容易做起来难的事。每每耳提面命，估计是让我们自我督促一下，“听到没，达到那些苛刻的要求才能接近高手”。
确实如此，同样的一个模块儿，高手编程时考虑的事情，思路跟入门级别的人会有所不同。而且往往达到高手一级的人，大都已形成自己独特的编程思维，或者类似于传统瓦匠、瓷匠的技艺手法。遇到什么的情况，如何处理，才能满足那些苛刻的要求，高手都有一套自己的策略。 Continue reading »也谈高手
css布局中常用的float样式，给我们带来非常丰富的布局，同时也给不熟悉它的人带来了许多浏览器兼容的麻烦。我这里根据自己的一些经验做些总结，希望对遇到问题的人有所帮助。
1.浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。普通的块级元素处在浮动元素下层，但它内部的文字（以及行内元素）会环绕浮动元素。
所以使用时某个父节点如div中两个float:left的子元素，如果这个div没有定义一个限定高度，那么子float元素不对自动撑开父div，除非在换行出强制加了“clear:both”的 div来结束float流,重新将页面布局倒入下一行.由于要加入一个空div,<div style=”clear:both”></div> 觉得语义不好,可以有一个折中的解决方案.
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }/*css 伪类*/ * html .clearfix {height: 1%;}/*IE hack*/
这样在调用float的父节点div可以添加clearfix类来自动完成clear避免了添加无意义的空div.
2. 浮动出现时,还有一种方法,可以不必非得添加过多的clear DIV来达到float 的布局效果.可以定义父节点Div的高度,来调节一下,以及相应的float元素的宽度.
以下是一个例子.
#layout_header{ height:50px; background-color:#3C6; } #layout_body{ background-color:#09F; } #layout_footer{ background-color:#F8F05A; height:20px; } .body-left{ float:left; } .clr{ clear:both; } #body_header{ background-color:#CF0; border:solid 2px . . . → Read More: css之float略解
Copyright © 2026 浮山狼de博客 - All Rights Reserved
Powered by WordPress & the Atahualpa Theme by BytesForAll. Discuss on our WP Forum
最新评论