分类
技术

日本地域简化地图

Japan_Css3_map

分类
技术

纯CSS画方形、圆形、梯形、三角形以及爱心,多角星、八卦图等

http://css-tricks.com/examples/ShapesOfCSS/

标记下原文。

分类
技术

safari下的input自定义样式问题

偶然使用ipad测试网站,发现自定义的input的按钮样式,有的正常,有的还是普通的按钮样式,不正常。

原因是按钮部分会按照苹果自己的方式渲染,只需要在CSS里添加个属性:

禁止苹果渲染就行了。

不过奇怪的是,有的是正常有的不正常,时间比较忙,不研究了。。

更详细的转载自:http://www.jb51.net/css/68771.html

分类
技术

IE6、IE7下的z-index,浮动层被挡住的问题

在正常的页面中,z-index属性决定了标签块的显示优先权,但是在IE6、IE7下,层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。
而在IE6、IE7下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是,相信这里面很多人不知道IE6、IE7下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签。有时平时我们多处理一个父标签,z-index层级多而复杂的情况不多见,所以难免会有认识上 的小小偏差。

转载自:http://www.wufangbo.com/ie6-ie7-z-index-bug/

分类
技术

关于CSS选择器中的空格

HTML文档是一棵树的结构,各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了‘父子关系’。基于这样的关系模型,CSS定义了后代选择器(descendant selector)也称为上下文选择器(contextual selector)。
后代选择器的写法为,子代元素以空格与父元素形成连接关系构成选择器,如:
div span{color:blue;}

以上规则的结果为:“作为div元素后代的任何span元素显示为蓝色字体”。

选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“…在…中找到”、“…作为…的一部分”、“…作为…的后代”,但是要求必须从右向左读选择器——《CSS权威指南》第三版

CSS还有两种选择器:类选择器和ID选择器,个中细则不是本文陈述的重点。本文的重点是:空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题,及解决方式。
先看看以下的规则:

div.blue {color:blue;}

以上规则的结果为:“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样,我的要求是:“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则:

div .blue{color:blue;}

以上规则的改进之处为’div’与’.blue’之间多了一个空格,这样是否就能形成后代选择器呢?答案是否定的!该规则实现的结果依旧是:“所有class属性值为blue的div元素显示为蓝色字体”。

那么该怎么结合类选择器构成后代选择器的效果呢?方法是有的,那就是给父元素div设置一个class或者id属性,假设我给它加上一个class属性,于是规则就变为:

div.contain .blue{color:blue;}

以上规则的结果为:“所有class属性值为contain的div元素,其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求,但已经很接近了。接近了,效果一定是很明显的,然而我却发现完全没有了蓝色字体,因为我把规则写为:

div.contain.blue{color:blue;}

以上规则的不同之处在于,’.contain’与’.blue’之间少了一个空格!少了空格,以上选择器就不是后代选择器了,而是另外一种选择器:“多类选择器”。

在HTML中,一个class值中有可能包含一个词列表,各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中:

<div class=”contain blue”>text</div>
以上的class属性值少了其中一个都无法将字体显示为蓝色! 
将以上规则放在一起,比较起来会清晰一点:

1 div.contain .blue{color:blue;}
2 div.contain.blue{color:blue;} 
以上两种规则分别应用的元素如下:

1 <div class=”contain”>contain<span class=”blue”>blue</span><!–后代–>
2 <div class=”contain blue”>contain and blue</div><!–多类–>
值得注意的是:ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素:

div#contain#blue{color:blue;}
以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔,构成后代选择器。

综上,选择器之间的空格是一种结合符,如果要构成后代选择器,则空格两边的选择符必须为如下两种形式:

  1. 元素选择符 空格 元素选择符
  2. 非元素选择符 空格 非元素选择符

后代选择器中绝对不可能出现的一种情形:元素选择符 [空格] 非元素选择符。
最重要一点:两个类选择器之间存在空格则构成后代选择器,之间没有空格的则构成多类选择器。