IE6不能隐藏select重现代码

建立两个关联的select，通过javascript控制第一个select 发生变化后，第二个select根据第一个value重新添加options，如果为空则隐藏第二个select（示例中判断除第一个之外都隐藏），则由第一个select的第三个value切换到第二个value则第二个select就不会隐藏。
具体效果见下面的实例：

IE6 select隐藏bug

IE6下不能隐藏select标签解决方案

1. 可以通过先设置select为显示，后设置为none的方式
2. 通过给select添加class来控制显示

具体方法，见示例代码源码注释的地方。

随机文章

• javascript获取隐藏dom的宽高
• 获取滔滔头像图片地址的算法
• 病毒清除啦~可是似乎xp中访问博客还是很慢！
• 园艺学院网站内测！开始，欢迎访问
• 7个JavaScript在IE和Firefox浏览器下的差异写法
• 使用xdebug调试PHP 找出PHP程序的瓶颈
• 哎~都挺穷的！
• jQuery教程之鼠标事件篇

© 三水清 for 三水清, 2011. | 4 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, IE6, javascript

猜你喜欢：
png在IE6下透明的几种方法	IE6中javascript文件开启Gzip出现代码不执行情况	IE6 PNG图片不透明问题的解决方法	解决IE6 select z-index无效，遮挡div的bug
无觅

今天的三个jQuery幻灯片其实还是两个，只不过第一种滚动的幻灯片有两种形式：分别是上下滚动和左右滚动。兼容IE6+，FF，chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同，自动播放时是一直往一个方向前进。
布局方面还算比较简洁，大家可以根据自己的需要添加内容，另外这次的幻灯片加上了文字，其实不光图片可以slider，文字也可以slider一会的。另外加了一点CSS3，就是控制按钮圆角化了（FF3.6+和chrome下有效果）。

截图

三种常见jQuery幻灯片（jQuery slider）实例

教程

可以研究其中的代码，原来与之前的文章教程类似：《CSS+jQuery实现滑动幻灯片实例详解》

实例

查看幻灯片演示

随机文章

• 韩峰其实是个好干部
• 对Zblog的页面分页链接的修改
• 手把手图解教你使用PQ魔法师调节硬盘分区大小
• 一个中国人笑不起来的笑话
• 普通话考试！~
• ZBlog表情更新——柏夫版【超酷搞笑】
• 新浪微博应用：微博送大礼
• 博客终于再次开通了

© 三水清 for 三水清, 2011. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, css3, javascript, jquery

猜你喜欢：
CSS+jQuery实现滑动幻灯片实例详解	jQuery教程之鼠标事件篇	jQuery选择器使用详解	jQuery浏览器判断一个bug，以及修改建议
无觅

1、border-radius

border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

圆

如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。

display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;

2、 box-shadow

box-shadow

接下来是非常普遍的box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数

1. x-offset x轴偏移
2. y-offset y轴偏移
3. blur 模糊值
4. color of shadow 阴影颜色

现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

box-shadow

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

<div class="box">
   <img src="tuts.jpg" alt="Tuts" />
</div>

The CSS

.box:after {
   content: '';
   position: absolute;
 
   z-index: -1; /* hide shadow behind image */
 
   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                
 
   width: 70%;
   left: 15%; /* one half of the remaining 30% (see width above) */
 
   height: 100px;
   bottom:  0;
}

3、 text-shadow

text-shadow

text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

1. x-offset 水平位移
2. y-offest 垂直位移
3. blur 模糊值
4. color of shadow 阴影颜色

 h1 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }

Text-Outline 和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很美观）。

body { background: white; }
 
h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

Text-Outline

4、 Text-Stroke

Text-Stroke

使用这个方法时要注意了，只有webkit（Safari， Chrome， iPhone）在最后的几年内还支持这个属性。其实，虽然我可能是错的，text-stroke还不属于CSS3范畴的一部分。在这种情况下，使用白 色字体时，firefox会显示一个空白页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字颜色。

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

Feature Detection 我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。 通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可就要采用备用的。 再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色设置成黑色。

5、 Multiple Backgrounds

Multiple Backgrounds

Background属性在CSS3样式中已经彻底改革，开始支持多背景图片。 举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。 要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的补偿 要添加一张单独的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下Modernizr。

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
 
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6、 background-size

目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？

body, html { height: 100%; }
 
body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

对，就是这么做，分别定义background-size的x，y参数。 最新版本的Chrome 和 Safari支持此属性，但我们还是要用旧的方法支持旧的浏览器。

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

7、 text-overflow

浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持切断容器中的文本，而且也给出了一个省略号的特性。

text-overflow

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
   border: 1px solid black;
   width: 400px;
   padding: 20px;
   cursor: pointer;
}

或许你会考虑当鼠标经过时显示全部的文本内容。

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

有点奇怪，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的normal属性。现在正常了。 知道吗？您还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。

8、 Flexible Box Model

Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性，但一旦你这么做了，将终身受益。 做个演示，创建简单的两列布局。

<div id="container">
 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>
</div>

首先我们要设定一个容器，然后指定它的宽和高，即便是没有实质性的内容在里面。

#container {
    width: 960px;
    height: 500px; /* just for demo */
 
    background: #e3e3e3;
    margin: auto;
 
    display: -moz-box;
    display: -webkit-box;
    display: box;

接下来分别定义#main和aside的背景色

#main {
   background: yellow;
}   
 
aside {
   background: red;
}

到目前为了还没有看出什么效果来。

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。 看看有什么效果产生，当我们设置了#main的宽度后。

#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。

aside {
    display: block; /* cause is HTML5 element */
    background: red;
 
   /* take up all available space */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一行。

Flexible Box Model

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且提供必要的备注。

9、 Resize

只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分，可用于重定义textarea的大小。

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

可能的值：

1. both： 重定义水平和垂直方向
2. horizontal： 水平调整大小限制
3. vertical： 垂直调整大小限制
4. none： 不支持重定义

Resize

10、 Transition

也许CSS3最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。 好像IE9还不支持此功能，但这并不代表你不能使用这个功能，关键是在于提高技能。 现在模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。
The HTML

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

The CSS

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }
 
 a:hover {
    padding-left: 6px;
 }

transition 有三个参数：

1. The property to transition. （Set this value to all if needed） 转换属性。（设置此值为所有如有需要）
2. The duration 持续时间
3. The easing type 缓动类型

为什么我们不将transition直接应用到hover上呢？是因为我们只是在mouseover时生效，当mouseout时元素将立即返回到其最初的状态。 因为我们对效果做了调整，所有对旧的浏览器不会产生任何影响。 接下来是通过文章所学，我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。具体如何创建我就不翻译了。

实例

原文地址：10 CSS3 Properties you Need to be Familiar with

随机文章

• 留言板美化结束
• Ubuntu安装NVidia驱动
• 俺的Feed地址又换了！
• 使用CSS设置文字反选的背景颜色
• javascript入门到高级PPT
• 发布WordPress来访者天气预报插件
• 推荐一款支持win7的超酷3D水纹屏保-Watery Desktop
• iframe自适用高度代码

© 三水清 for 三水清, 2010. | 6 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, css3

猜你喜欢：
Less—让CSS如此简单	CSS3 Media Queries使用方法详解	前端必须掌握30个CSS3选择器	悼念地震，网站变灰CSS代码
无觅

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

* {  
 margin: 0;  
 padding: 0;  
}

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中，例如下面的代码：

#container * {  
 border: 1px solid black;  
}

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

#ID：ID选择器

#container {  
   width: 960px;  
   margin: auto;  
}

ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

.class:类选择器

.error {  
  color: red;  
}

类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X Y：标签组合选择器

li a {  
  text-decoration: none;  
}

标签组合选择器也是常用的选择器。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X：标签选择器

a { color: red; }  
ul { margin-left: 0; }

如果你只是想要页面中的某个标签样式改变，可以选择使用标签选择器。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:visited and X:link

a:link { color: red; }  
a:visted { color: purple; }

伪类选择器，最常用的为A标签

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X + Y：毗邻元素选择器

ul + p {  
   color: red;  
}

毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X > Y：子元素选择器

div#container > ul {  
  border: 1px solid black;  
}

匹配#container下的所有子元素。
关于X>Y和X Y的区别请看下面的html实例：

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>

选择器#container > ul只会匹配到第一个UL，也就是#container的子元素UL，而不是li里面的ul，但是div ul则可以匹配到所有DIV里面的ul。

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X ~ Y：

ul ~ p {  
   color: red;  
}

匹配任何在X元素之后的同级P元素。也就是选择了UL之后的同级所有的元素。

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[title]：属性选择器

a[title] {  
   color: green;  
}

匹配具有某属性的标签，例如实例中是匹配具有title属性的a标签。

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[href="foo"]

a[href="http://js8.in"] {  
  color: #1f6053; /* nettuts green */  
}

也属于属性选择器，匹配属性中为某个值的标签。例如实例中匹配的为href="http://js8.in"的a标签，而其他链接的a标签不选择。

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[href*="nettuts"]

a[href*="tuts"] {  
  color: #1f6053; /* nettuts green */  
}

属于属性选择器，匹配href中所有含有tuts的标签。正则匹配

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[href^="http"]

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}

与上面的属相选择标签类似，但是匹配的以http开头的A标签，正则匹配

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[href$=".jpg"]

a[href$=".jpg"] {  
   color: red;  
}

匹配属性中以.jpg结尾的标签，正则匹配，也是属性选择器的一种

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[data-*="foo"]

如果你要匹配所有的图片链接，你可以通过下面的CSS来实现：

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
}

但是如果我们给a标签添加一个data-filetype属性，我们就可以使用下面的CSS来快速的选择我们需要匹配的标签了。

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  
</html>
<pre lang="css">a[data-filetype="image"] {  
   color: red;  
}

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[foo~="bar"]

a[data-info~="external"] {  
   color: red;  
}  
 
a[data-info~="image"] {  
   border: 1px solid black;  
}

匹配属性中具有多个空格分隔的值、其中一个值等于“bar”的X元素，例如下面的例子：

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}

这个选择器主要用于checkbox，选择checkbox为当前选中的那个标签。

查看演示

兼容性

1. IE9
2. Firefox
3. Chrome
4. Safari
5. Opera

X:after

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
    }  
 
.clearfix {  
   *display: inline-block;  
   _height: 1%;  
}

before 和after是在选择的标签之前或者之后插入内容，一般用于清除浮动，但是对于IE6、IE7是不可用的。

兼容性

1. IE8+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:hover

div:hover {  
  background: #e3e3e3;  
}

最常用的就是A标签了，但是在IE6浏览器下除了A标签之外，其他标签div:hover不匹配。

查看演示

兼容性

1. IE6+（IE6只可以使用在A标签中）
2. Firefox
3. Chrome
4. Safari
5. Opera

X:not(selector)

*:not(p) {  
  color: green;  
}

选择除了（）中选择器之外的标签元素。

查看演示

兼容性

1. IE9
2. Firefox
3. Chrome
4. Safari
5. Opera

X::pseudoElement

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}  
p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}

分别用于匹配元素的第一行和第一个字母。看实例：

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:nth-child(n)

li:nth-child(3) {  
   color: red;  
}

匹配X元素中从头数第几个标签，例如上面的代码是匹配的是第三个li标签。

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

X:nth-last-child(n)

li:nth-last-child(2) {  
   color: red;  
}

与上一个选择器相反，这个选择器是倒序匹配第几个标签，上面的代码的意思是匹配倒数第二个li标签

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

X:nth-of-type(n)

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

与:nth-child()作用类似，但是仅匹配使用同种标签的元素

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

X:nth-last-of-type(n)

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
}

与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

X:first-child

ul li:first-child {  
   border-top: none;  
}

匹配其父元素的第n个子元素，第一个编号为1

查看演示

兼容性

1. IE7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:last-child

ul > li:last-child {  
   color: green;  
}

匹配其父元素的倒数第n个子元素，第一个编号为1

查看演示

兼容性

1. IE9
2. Firefox
3. Chrome
4. Safari
5. Opera

X:only-child

div p:only-child {  
   color: red;  
}

匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

查看演示

兼容性

1. IE9
2. Firefox
3. Chrome
4. Safari
5. Opera

X:only-of-type

li:only-of-type {  
   font-weight: bold;  
}

匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

X:first-of-type

li:only-of-type {  
   font-weight: bold;  
}

匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

查看演示

兼容性

1. IE9
2. Firefox 3.5+
3. Chrome
4. Safari
5. Opera

原文出处：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
PS：也不算是翻译，只是根据作者整理的然后融入了我自己的理解，希望大家斧正。

随机文章

• 公司的DBA说了一些SQL数据库的箴言
• 真正的jQuery的radio与checkbox取值
• Sina App Engine开发实例：天气预报的定时短信（二）
• 光良,第一次—珍喜欢
• 提高Firefox的innerHTML()的性能
• jQuery 1.4.1 中文参考文档下载
• 08.11.17
• host配置：设置电脑DNS解析文件host

© 三水清 for 三水清, 2010. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, css3

猜你喜欢：
前端必须熟悉的10个CSS3属性	CSS3 Media Queries使用方法详解	引入CSS 的两种方式：link和@import的区别	CSS 3.0 参考手册 (中文版)下载
无觅

隶属上的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。

@import次数限制

传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现这样的情况，说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等

兼容性上的差别

由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题（似乎影响不大~）。

使用DOM控制样式时的差别

当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import，而如果进行Ajax或者交互的样式，则可以通过@import引入

随机文章

• 关于jQuery ready()方法一些用法解释
• 断桥残雪部落格更换新域名JS8.in
• IE6下javascript不能隐藏select标签的bug
• 一份web前端开发的简历
• jQuery插件wBox准备更新
• jQuery浏览器判断一个bug，以及修改建议
• 真正的jQuery的radio与checkbox取值
• 通过JSONP实现完美跨域

© 三水清 for 三水清, 2010. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css

猜你喜欢：
悼念地震，网站变灰CSS代码	Less—让CSS如此简单	CSS清除浏览器默认样式注意点	使用CSS设置文字反选的背景颜色
无觅

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

然后使用下面的CSS代码

html {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

如果贵网站有Flash，那么请在<object>和<&/object>之间插入一下代码：

<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>

随机文章

• 使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境
• 关于wBox iFrame回调关闭问题的解决方案
• 2010年世界杯比赛时间表-北京时间
• 十枚腾讯微博内测邀请的种子
• 提高Firefox的innerHTML()的性能
• jQuery浏览器判断一个bug，以及修改建议
• onbeforeunload与a标签在IE中的冲突bug
• IE中Image.onload失效的问题

© 三水清 for 三水清, 2010. | 9 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css

猜你喜欢：
Less—让CSS如此简单	使用CSS设置文字反选的背景颜色	CSS清除浏览器默认样式注意点	CSS3 Media Queries使用方法详解
无觅

反选默认样式

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}
 
::selection {
    background:#cc0000;
    color:#fff;
}
 
code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}
 
code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，

随机文章

• host配置：设置电脑DNS解析文件host
• QQ概念版已经开放下载使用
• 一款模仿Mac的windows7主题包
• 使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境
• 淘江湖钱庄抽奖技巧
• 官方中文正式原版PhotoShop CS5下载
• 网站首页做完了~i.2fool.cn
• 页面设计的10免费图标组合

© 三水清 for 三水清, 2010. | No comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css

猜你喜欢：
Less—让CSS如此简单	引入CSS 的两种方式：link和@import的区别	CSS3 Media Queries使用方法详解	CSS 3.0 参考手册 (中文版)下载
无觅

HTML部分代码

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

css+jQuery实现滑动幻灯片实例教程

CSS部分代码

Take a look at the comments below for an explanation of the styles.

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:286px;	width: 790px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}
 
/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

JS部分代码

The following script contains comments explaining which jQuery actions are being performed.
1.Setting up the Image Slider
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
 
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
 
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

2.Setting up the Slider Function and Timer
We first create the function for the slide event by itself (rotate). Then create another function (rotateSwitch) that will rotate and repeat that slide event (rotate).

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 
    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );
 
}; 
 
//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};
 
rotateSwitch(); //Run function on launch

Take a look at this tutorial for an explanation of how the timer (setInterval) works.

3.Hover and Click Events
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	
 
//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotateSwitch(); // Resume rotation timer
    rotate(); //Trigger rotation immediately
    return false; //Prevent browser jump to link anchor
});

css+jQuery实现滑动幻灯片实例教程

查看演示

一些网站实例

Below are some sites that use similar techniques, check them out for inspiration!

随机文章

• 官方中文正式原版PhotoShop CS5下载
• 通过JSONP实现完美跨域
• Adobe紧急发布flash Clickjacking漏洞暂时的解决方案
• 根据IP返回地理位置地址以及地理经纬度的方法
• Javascript正则表达式详解
• 万众期待的Ajax评论发布啦-dedecms扩展工具
• 爱墙（许愿墙）程序后台添加置顶、搜索等功能
• 去掉Eclipse插件Aptana启动显示My Aptana

© 三水清 for 三水清, 2010. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, jquery

猜你喜欢：
三种常见jQuery幻灯片（jQuery slider）制作教程	Less—让CSS如此简单	悼念地震，网站变灰CSS代码	25大实用的jQuery技巧和解决方案
无觅

写CSS 最痛苦的是要搞定一堆浏览器兼容bug ，其次就是要面对CSS 不是programming language 这现实，不存在其他程式语言常见的变数、运算、继承等概念，使原本简单的工作变得冗长，并且使维护工作变得麻烦。
less 的出现便是为了解决这个问题：在现有CSS syntax 的基础上，为CSS 加入程式语言的特性，包括变数、scope、nested rules、运算、继承。
看例子你便会明白：

@brand_color: #F0F;
 
#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
}
}

这例子应该很容易理解吧，相等于以往的：

#container div {
color: #F0F;
border: none;
}
#container p {
color: #F0F;
}

坏消息是，用less 写成的档案需要在Unix based 的电脑上编译过后方能变成真正的CSS；好消息是，有人写了个小工具less.app 可以完成这项工作，使不懂得用terminal的用户也能够使用。在 window 下貌似没有简单的解法…
less 官方网站：http://lesscss.org/
less.app (GUI): http://incident57.com/less/

随机文章

• Google Map API教程之使用GControl对象在地图上添加control按钮
• 园艺学院网站内测！开始，欢迎访问
• IE6中javascript文件开启Gzip出现代码不执行情况
• iframe自适用高度代码
• 通过PHP批量下载图片文件
• 只要20元，你也可以做个QQ爱墙
• 如何写网站的robots.txt和meta name robots的配置
• Sql语句优化注意

© 三水清 for 三水清, 2010. | One comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css

猜你喜欢：
使用CSS设置文字反选的背景颜色	引入CSS 的两种方式：link和@import的区别	前端必须熟悉的10个CSS3属性	CSS清除浏览器默认样式注意点
无觅

png透明针对IE6一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用IE的滤镜来解决的。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有以下几种：

1、css方法

css：

.pngs {
height: 90px;width: 90px;
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
}

xhtml：

<div class=”pngs”></div>

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其position:relative;

css：

.png div{position:relative;}

xhml:

<div class=’png’>
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

这种方法可以使用在那些png图片不多，且不需要repeat的情况下。

2、js方法

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
    var arVersion = navigator.appVersion.split(“MSIE”)
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
       for(var j=0; j”
             img.outerHTML = strNewHTML
             j = j-1
          }
       }
    }
}
window.attachEvent(“onload”, correctPNG);

这种js先判断是否IE，然后判断ie版本，版本在6.0下则判定函数，给png的图片添加滤镜。
使用起来的确方便，无论多少图片都可以解决，但是依然无法repeat。

3、htc方法

htc相当于完全通过插件的方法修复的IE6的bug，功能强大，支持repeat，背景等功能，使用起来也很方便。
使用一个iepngfix.htc 文件，和一个透明的gif文件。

使用方法：

<!–[if lte IE 6]>
<style>.png{behavior:url(“iepngfix.htc”);}</style>  //在这里可以加入其他用到png图片的id或者class
<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>
<![endif]–>

ps：如果需要repeat背景，往往需要设置这个div 宽度为100%。

关于iepngfix.htc的详细用法以及Demo，请狂点此处

总结

总结这几种方法，第三种方法（htc方法）是最简单实用，且容易推广的方法，建议可以做个公共的地址，有产品需要，只需要应用这个公共地址就行了。

随机文章

• 十枚腾讯微博内测邀请的种子
• WordPress博客的 SEO 技巧
• IE6下javascript不能隐藏select标签的bug
• 通过javascript实现整站黑白效果
• host配置：设置电脑DNS解析文件host
• Javascript在IE与Firefox下的差异写法总结
• 网易推出LBS产品网易八方
• 网站首页做完了~i.2fool.cn

© 三水清 for 三水清, 2010. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: css, IE6, javascript

猜你喜欢：
IE6下javascript不能隐藏select标签的bug	IE6 PNG图片不透明问题的解决方法	解决IE6 select z-index无效，遮挡div的bug	解决IE6不支持max-height的bug
无觅