CSS教程之让IE能够变相撑持CSS3挑选器

只看该作者 · 发表于 2015-1-15 23:23:54

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造Poluoluo文章简介：但是IE对初级CSS选择器出格是CSS3选择器的撑持让我们一向不克不及将CSS选择器推行使用。不外，固然我们没法摆布扫瞄器的市场份额，却能够经由过程一些手艺改良我们的事情。我们也能够利用别的的一些手艺，让IE能够变相撑持CSS3选择器。
别误解，IE是不撑持CSS3初级选择器，包含最新的IE8（详见《CSS选择器的扫瞄器撑持》），可是CSS选择器切实其实是很有效的，它能够年夜年夜的简化我们的事情，进步我们的代码效力，并让我们很便利的制造高可保护性的页面。
但是IE对初级CSS选择器出格是CSS3选择器的撑持让我们一向不克不及将CSS选择器推行使用。不外，固然我们没法摆布扫瞄器的市场份额，却能够经由过程一些手艺改良我们的事情。我们也能够利用别的的一些手艺，让IE能够变相撑持CSS3选择器。
一名来自英国的网页开辟工程师KeithClark开辟了一个JavaScript计划来使IE撑持CSS3选择器。该剧本撑持从IE5到IE8的各个版本。
用法

你只必要下载RobertNyman的DOMAssistant剧本和ie-css3.js并将它们在你的页面的head标签中导进，以下：

<head><scripttype="text/javascript"src="DOMAssistantCompressed-2.7.4.js"></script><scripttype="text/javascript"src="ie-css3.js"></script></head>

复制代码

撑持的选择器

:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:empty

ie-css3的一些限定

款式表必需经由过程<link>标签引进。页面级的款式表大概内联的款式表将有效。不外你能够在内部款式文件中利用@import导进别的款式文件；
款式表文件必需和页面放在统一个域名上面；
利用file://路径的款式文件将因为扫瞄器的平安成绩而不起感化；
:not()选择器尚不撑持；
该办法不是静态的，款式被使用以后再改动DOM，将会有效。

怎样事情的?

ie-css3.js下载页面的每个款式文件并剖析它的CSS3伪选择器。假如一个选择器被找到，它就会被交换为同名的CSSclass。好比：　div:nth-child(2)　将会酿成　div._iecss-nth-child-2　。然后，RobertNyman的DOMAssistant用于寻觅婚配元素CSS3选择器的DOM节点然后将响应的CSS类增加给它。
终极，元素的款式表会被新的版本替换，然后用CSS3选择器对响应元素增加对应的款式。
制止IE的CSS注释器

依据W3C的划定，一个扫瞄器应当忽视它不熟悉的CSS划定规矩。这就呈现一个成绩——我们必要使用款式表文件中的CSS3选择器，可是IE会将它们抛弃。
为了不这个成绩，每个款式文件城市经由过程XMLHttpRequest下载。这同意该剧本绕开扫瞄器内置的CSS注释器并可以读取原始的CSS文件。

会见项目主页
下载ie-css3.js
下载DOMAssistant

替换计划

明显这个也并不是完善的计划，关于Ajax网站来讲，它基础上是不克不及用的，由于在天生的款式表被使用以后再改动DOM，就不会无效了。可是现实上我们能够本人来自界说一个ie-css3的。只是没有它这个这么智能。
利用cssQuery

cssQuery是由业界年夜牛DeanEdwards开辟的一个Javascript组件。它就是为CSS选择器而生的。它能够撑持几近一切的CSS选择器，包含CSS3选择器。固然它在完成的时分举行了分级，分离针对CSS1，CSS2和CSS3制造了一个自力的js包，和一个尺度包。撑持一切A级扫瞄器。
复杂的用法：

vartags=cssQuery("body>p");vartags=cssQuery("[href]");vartags=cssQuery("a[href=#]");

复制代码

然后你就能够本人写一些js为响应的工具增加想用的款式了。
我倡议对撑持CSS初级选择器的扫瞄器利用原生的CSS选择器写法，然后经由过程cssQuery在IE中静态的为呼应的元素增加一个款式名。
好比，我们能够如许写CSS：

a[herf=#],a.empty{color:red}

复制代码

这里的第一条CSS3选择器是用于Firefox/webkit等撑持CSS3选择器的非IE扫瞄器的，a.empty是专门为IE而写。然后经由过程CSSQuery静态的在IE扫瞄器中为对应的元素增加款式：

vartags=cssQuery("a[href=#]");tags.className="empty";

复制代码

固然，下面的这段js最好利用IE的前提正文。
利用jQuery

听说jQuery的选择器比cssQuery要快良多。固然，无能否认，jQuery的选择器是今朝盛行的js框架中最好用的一个。而利用jquery来完成相似上述功效要便利良多，由于jQuery的选择器更好用。
OK，jQuery的做法和cssQuery有些相似，CSS能够写成下面一样的，JS能够如许写：

$("a[href=#]").addClass("empty");

复制代码

更详细的用法能够检察我之前写的一个小例子《利用jQuery创立本性化链接款式》
利用DOMAssistant

DOMAssistant也是一个很不错的JS库，它供应了一些相似jQuery的功效，好比CSS选择器、事务和一些DOM操纵。它的长处就是玲珑，紧缩后只要9KB，我想这就是KeithClark选择DOMAssistant来作为ie-css3.js的基本框架的次要缘故原由吧。jQuery愈来愈瘦削了，并且用于完成这个功效有些华侈了。并且DOMAssistant的用法和jQuery十分相似。
现实上，DOMAssistant的选择器和对DOM的CSSClass的操纵与jQuery千篇一律。

$("a[href=#]").addClass("empty");

复制代码

欲懂得更多，可检察DOMAssistant官方，和下载官方中文PDF文档
</p>
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

只看该作者 · 发表于 2015-1-17 22:34:57

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-1-25 05:04:25

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-2-8 04:01:47

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-2-24 14:57:24

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-7 13:05:19

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-3-15 07:33:53

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-22 00:08:02

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之让IE能够变相撑持CSS3挑选器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子