浅谈对前端开发时对html中一些招数的运用

昨天写了篇《对于新手编写web静态站习惯的养成 》点击挺多，看样子大家对前端开发也蛮感兴趣的，那我就将我所学都拿出来与大家分享一下，仅对刚开始上手的新手进行启发和解决一些小问题，因为我也刚入行2年左右，在职内学到的新东西不多，但是经验还是有点的，所以针对我刚开始学习时候碰到的问题和不懂的地方进行了整理，以后每天更新博客，把我当时学习的经验和问题的解决方法一一和大家分享（想当初，我刚开始学习的时候到处碰壁，到处找问题，疯狂的看书和实践，高手不指点，水平一样的讨论进步不明显，全靠在网上问问题，找案例，进行解剖，分析.....）

废话不说，直奔主题：第一个就是星号html招数

星号即“*”这个符号是最著名而且也是最有用的css过滤器（过滤器也就是达到某种效果的样式，以下不再提示）之一。这个过滤器非常容易记住，它可以指定IE6和更低版本的浏览器。HTML元素是网页上的第一个元素。可以使用通用选择器（选择器也就是写css样式时的选择名称）指定包围在另一个元素中的HTML元素。因为这种情况只在IE6和更低版本中出现，所以可以将特定的规则也就是所有元素都要运用的默认规则应用于浏览器：

1 * html

2 {

3 font-size:small;

4 }

在任何常规的css规则的开头添加一个通用选择器和一个html类型选择器，这样就会对除IE之外的所有浏览器隐藏这个规则，使用这个规则最常见的方式是，设置一个希望应用于除IE之外的所有浏览器的规则，然后使用星号“*”html招数在IE中覆盖这个规则，你也可以理解为替换。打个比方：你在页面上设置的是一个点线样式，但是在IE6及以下版本下却给你显示一个虚线，但是你这个点线是点睛之笔，不能显示虚线，那怎么办呢？你可以将锚上的鼠标停留边框样式设置为点线，但是在IE中覆盖这个规则，让它们成为实线。虽然勉强一点，但是实线可能比虚线的效果更好一点呢？暂时我还没找到比这个更好的解决方法，如果各位老鸟有的话，请留下观点。

这个bug还没发现在别的浏览器上出现过。星号招数提供了一个相当可靠的指定IE6和更低版本的办法。

1 a hover

2 {

3 border:1px dotted black;

4 }

5

6 * html a:hover

7 {

8 border-style:solid;

9 }

第二个是oWen招数

到目前为止的所有过滤器针对的都是各种IE版本，这在一定程度上说明了IE的bug非常之多，当然其中也有IE是目前最流行的浏览器的因素。然而，就因为它作为最流行的浏览器，所以它的很多bug被开发人员找出记录下来并找到了解决方案。但是，其他浏览器也有bug，包括Opera6和更低的版本。

Owen招数使css书写者能够对Opera6和更低版本以及Windows上的IE6和更低版本隐藏样式。这个过滤器之所以能够起作用是因为这些浏览器没有实现第一子选择器。因为只能有一个头部元素，所以它总是第一子元素。主题标签总是出现在头部标签的后面，所以可以使用相邻的同胞选择器找到它。比较符合标准的浏览器能够理解最终的选择器，但是Opera6以及windows上的IE6和更低版本会忽略它。下面我们举一个例子，使用Owen招数为比较符合标准的浏览器在主题标签上添加一个北京Png图像，而对IE6/Win和Opera6和更低版本隐藏它：

1 head:first-child+body

2 {

3 background-image:url("bg.png")

4 }

如果只希望针对Opera6和更低版本传递这个信息，那么需要结合使用Owen招数和子选择器招数。假设希望向Opera6用户显示一个升级信息，首先，使用子选择器在除了windows上的IE6和更低版本的所有浏览器上显示升级信息。然后使用Owen招数对比较现代的浏览器隐藏这个信息：

1 html>body #getfirefox

2 {

3 display:satic;

4 }

5 head:first-child+body #getfirefox

6

7 {

8 display:none;

9 }

先写两个，家里的桌子坏了，我在床上写的，累死我了。感谢techstan，让我这个我不是个另类！！

（喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式，或者跟我发邮件747850255@qq.com转载请自觉附上转载地址，来自博客园“明年开奥迪”)