electivizr-让IE6~8支持CSS3伪类和属性选择器

最新推荐文章于 2024-07-17 18:42:40 发布
最新推荐文章于 2024-07-17 18:42:40 发布
阅读量259 收藏
点赞数
分类专栏： css 文章标签： css

本文地址：http://www.zhangxinxu.com/wordpress/?p=1104
此项目首页：http://selectivizr.com/

一、下载和demo
下载：
您可以狠狠地点击这里：selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K)

demo:
您可以狠狠地点击这里：Selectivizr部分属性测试demo

二、简介
selectivizr是一个JavaScript工具，使IE浏览器也可以支持CSS3伪类以及属性选择器，使用很简单，只要把js include到页面上，然后你就可以(～ o ～)~zZ补觉了。

优点在于：
1. 让老的IE浏览器支持19个CSS3伪类，2个伪元素，以及所有的属性选择器。
2. 即使你完全不懂JavaScript，也没有关系，因为你只要链接这个文件就ok了。
3. 可以与现存的JavaScript库协调工作。
现存的一些JavaScript库 张鑫旭-鑫空间-鑫生活

三、使用
直接调用JavaScript文件就可以了：

leadn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让IE6/IE7/IE8支持CSS3属性的8种方法介绍
01-19
我们都知道，IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，我觉得这些都是很有意义，很有价值的工作，可以推动整个技术领域的进步的。到...
html5+css3的第4天 使用工具：HBuilder X
qq_46426476的博客
11-30 807
css 选择器: 统配选择器: *{ } 标记选择器: tagName{ } 类选择器{ } class="" .class{ } Id选择器 id="" #id{ } 复合类型的选择器: 群组选择器：多个选择器作用同一个样式 b,s{ } .list,p,#id{ } 后代选择器:匹配某个元素的所有的后代元素 ul li{ } grandfather father son 2222 2222 222 3333
css3 伪元素和伪类选择器详解
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`  提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是...
CSS3 伪类选择器 nth-child()说明
09-25
CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。
CSS3结构性伪类选择器九种写法
01-19
一、X:nth-child(n) ...demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 479
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web开发：四角线框效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-17 713
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1108
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 376
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 519
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
05.CSS 缓动变量 && 首字下沉 & 放大缩小动画
粉丝们务必加入微信粉丝群
07-14 186
我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即。首字下沉，让第一段的第一个字母比其余文本大。在设计中,大多数 Web 开发人员对于。创建一个放大缩小的动画效果。的大多数用例使用内置的。
如何在CSS中控制动画的触发位置？
xixixixixixixi21的博客
07-14 247
在CSS中控制动画的触发位置主要是通过transform属性来实现的。例如，如果你希望动画从某个固定的位置开始，可以设置transform: translate(x, y)，其中x和y是你想让元素偏离其原始位置的距离。通常表示元素静止在原位；可以百分比定位，比如translate(50%, 0)会让元素居中；直接用像素值指定距离。例如，如果你想让一个元素在页面加载时从左侧滑入，可以设置transform:然后配合transition或animation来创建滑动效果。
CSS基础学习之元素定位（6）
07-17 302
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
只用 CSS 能玩出什么花样？
艾恩小灰灰的博客
07-17 733
CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能，我们不仅能够构建美观且功能性的网站，还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画，CSS 提供了无尽的可能性，等待着每一位前端开发者去探索和实现。以上代码示例展示了 CSS 的部分能力，但真正的乐趣在于实验和创造。所以，拿起你的代码编辑器，开始探索 CSS 的无限可能性吧！
CSS变换
m0_63165331的博客
07-14 622
本文主要讲述CSS中的变换相关内容。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1185
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
Web前端-Web开发CSS基础4-显示
a15735748145a的博客
07-16 237
1. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>2. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>，而其父元素的position未设置，则该元素的位置将会相对于谁？
【CSS in Depth 2 精译_018】3.1.2 逻辑属性 + 3.1.3 用好逻辑属性的简写形式
PeacefulWinter的博客
07-14 792
本篇重点介绍了CSS常规流中的一个重要的基础概念——逻辑属性。它是理解flexbox及grid布局核心概念的基础。文章通过详细的对比和示例进行了深入讲解，并列举了常见的逻辑属性与对应的传统属性。最后还介绍了一种将逻辑属性作为样式简写的巧妙方法，值得广大CSS爱好者收藏并实践。
Tailwind CSS指南
m0_46543935的博客
07-13 694
PostCSS 插件Vite 使用 PostCSS 插件处理 CSS 文件。在构建过程中，PostCSS 解析你的 CSS 文件并将其转换为 Tailwind CSS 样式。JIT 模式Tailwind CSS 的 JIT 编译模式可以在开发过程中动态生成所需的样式类。这意味着只会生成你实际使用到的 CSS 类，从而减小最终的 CSS 文件大小并提高性能。并且Tailwind CSS 提供了方便的响应式设计工具。你可以通过添加断点前缀来指定不同屏幕尺寸下的样式。配置文件。
CSS选择器.pdf
10-09
"CSS选择器.pdf" 在前端开发中，CSS（Cascading Style Sheets）是用于控制...同时，随着CSS版本的更新，例如CSS3引入了更多的选择器，如更强大的伪类和伪元素，以及更精确的属性选择符，使得CSS的表达能力进一步增强。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值