运用before/after伪类时怎样CSS取名和对于ie6/ie7访问

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

1、诉说序言
before/after伪类非常于在元素內部插进两个附加的标识,其最合适也是最强烈推荐的运用便是图型转化成。在1些精美的UI完成上,能够简化HTML编码,提升可读性和可维护保养性。海外这两个伪类运用非常的普及和强盛,但是貌似大家这边前端开发er们广泛欠缺应用这两个伪类的观念,要应用顶多也便是跟风的“消除波动”运用。
我想,这将会受适配性逻辑思维危害——IE6/7访问器其实不适用,還是等何时IE6/IE7换届下台的情况下再说吧~~
尽管8尾9尾全是残体,其实不危害10尾的成型。1粒耗子屎掉进锅里,你就真让这1锅红烧肉毁了——把有翔的这一部分给阿黄(中华民族田园犬)吃便可以了。
本文简易展现我在具体新项目中,运用before/after伪类情况下,怎样CSS取名的,HTML有哪些解决,怎样应对IE6, IE7访问器的。

2、大概解决步骤
1.CSS一部分
相近这模样的取名:

拷贝编码
编码以下:

.example:before, .example before {}
.example:after, .example after {}

1个有冒号,1个是空格隔开。前者IE8+及别的当代访问器;后者为IE6⑺提前准备的。
2.HTML一部分
假如before/after伪类元素含有content內容(并不是空标识符),则content內容在HTML标识上展现(便捷IE6/7下获得),比如:

拷贝编码
编码以下:

<div class="example" data-content=""></div>

CSS一部分的content特性值应当以下:

拷贝编码
编码以下:

.example:before, .example before { content: attr(data-content); ... }
.example:after, .example after { content: attr(data-content); ... }

3.JS一部分
JS是为IE6/7提前准备的,所做的事儿很简易,网元素內部插进两个元素,标识名为”before“或”after“或另外。方式编码以下:

拷贝编码
编码以下:

var $beforeAfter = function(dom) {
if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before")
, after = document.createElement("after");
// 內部content
before.innerHTML = content;
after.innerHTML = content;
// 前后左右各自插进连接点
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};

因而,您要想的实际效果便可以完成了,比如下面的事例。

3、具体运用之含尖角的tip类提醒实际效果
下面是实际效果图,IE6下和FireFox16下的实际效果截图

IE6/7的CSS与IE8+基础上全是公共的,唯1不一样便是挑选器1个空格间开,1个冒号伪类,以下:

拷贝编码
编码以下:

.tip:before, .tip before,
.tip:after, .tip after{...}

随后,JS以下1启用便可:

拷贝编码
编码以下:

$beforeAfter(document.getElementById("tip"));

OK,所有适配,完事OK。
1般而言,after和before转化成的元素只能是1些不危害作用或是关键视觉效果的实际效果。因而,IE6/7下JS驱动器不关紧要实际效果的转化成是非常OK的。
赶着帮老婆带饭,毛遂自荐,就这些!