云顶娱乐-云顶娱乐游戏平台官网
做最好的网站
当前位置: 云顶娱乐 > 云顶娱乐 > 正文

类名设计,强盛的伪选用器【云顶娱乐游戏平台

时间:2019-11-23 17:58来源:云顶娱乐
编排越来越好的CSS代码 2014/01/15 · CSS · 9评论 ·CSS 本文由 伯乐在线 -yanhaijing翻译。未经许可,禁绝转发! 泰语出处:MathewCarella。款待参预翻译组。 编辑好的CSS代码,有助提高页面包车

编排越来越好的CSS代码

2014/01/15 · CSS · 9 评论 · CSS

本文由 伯乐在线 - yanhaijing 翻译。未经许可,禁绝转发!
泰语出处:Mathew Carella。款待参预翻译组。

编辑好的CSS代码,有助提高页面包车型客车渲染速度。本质上,引擎需求解析的CSS法规越少,质量越好。MDN中校CSS选取符归类成三个入眼项目,如下所示,品质依次裁减。

  1. ID 规则
  2. Class 规则
  3. 标签法则
  4. 通用准则

对功效的广阔认知是从SteveSouders在贰零壹零年问世的《高品质网址建设进级指南》开始,尽管该书中列支的愈益详实,但您也足以在这里翻开完整的援用列表,也足以在Google的《火速CSS选拔器的一流实践》中查看越来越多的内部情形。

本文我想享受部分自笔者在编排高品质CSS中用到的轻巧例子和指南。那一个都以十分受MDN 编写的快速CSS指南的引导,并依据近似的格式。

CSS之旅(3卡塔 尔(英语:State of Qatar):强盛的伪选取器

2015/05/08 · CSS · CSS, 伪选用器

初藳出处: 一线码农   

谈到伪接收器,真的让自家认知到了CSS的最棒强盛,强大到本身相像都不认知CSS了,有一些C# 6.0中有的语法糖带来大家的撼动。。。首先大家得以在VS里面提前预览一下。

云顶集团最新域名 1

能够看来,上边的伪类有无尽居多,多的让本人眼都快瞎了。。。下边就挑一些实用性相比较强的说一说。

风流倜傥  :nth-child 伪接收器

咱俩领略在jquery中有风华正茂种选拔器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,那回在CSS中相像

能够办到,能够说一定程度上缓慢解决了jquery的下压力,下边简单举例。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:nth-child(1) { color: red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

云顶集团最新域名 2

能够看出,当作者灌的是:nth-child(1)的时候,ul的第二个li的color已经成为red了,固然复杂一点的话,能够将1改成n,浏览器在拆解深入分析css的伪类

选用器的时候,内部应该会调用相应的艺术来解析到相应dom的节点,首先要了然n是从0,步长为1的依次增加,那一个和jquery的nth-child相近,没

什么样好说的,然后大家品尝下:first-child 和 last-child。

XHTML

<html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:first-child { color: red; font-weight:800; } ul li:last-child { color: blue; font-weight: 800; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:first-child {
            color: red;
            font-weight:800;
        }
 
        ul li:last-child {
            color: blue;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

云顶集团最新域名 3

二 :checked,:unchecked,:disabled,:enabled

同等在jquery中,有豆蔻梢头组接受器叫做“表单对象属性“,大家能够看看jquery的在线文书档案。

云顶集团最新域名 4

相通我们很兴奋的意识,在css中也设有这几个属性。。。是否始于有一点醉了。。。依旧向阳花木。

  1. disabled,enabled

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> input[type='text']:enabled { border: 1px solid red; } input[type='text']:disabled { border: 1px solid blue; } </style> </head> <body> <form> <input type="text" disabled="disabled" /> <input type="text"/> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        input[type='text']:enabled {
            border: 1px solid red;
        }
 
            input[type='text']:disabled {
                border: 1px solid blue;
            }
    </style>
 
</head>
<body>
    <form>
        <input type="text" disabled="disabled" />
        <input type="text"/>
    </form>
</body>
</html>

云顶集团最新域名 5

  1.  checked,unchecked

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> form input[type="radio"]:first-child:checked { margin-left: 205px; } </style> </head> <body> <form> <input class="test" type="radio" value="女" /><span>女</span><br/> <input class="test" type="radio" value="男" /><span>男</span> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        form input[type="radio"]:first-child:checked {
            margin-left: 205px;
        }
    </style>
 
</head>
<body>
    <form>
        <input class="test" type="radio" value="女" /><span>女</span><br/>
        <input class="test" type="radio" value="男" /><span>男</span>
 
    </form>
</body>
</html>

云顶集团最新域名 6

  1. selected

其后生可畏在css中固然尚无原装的,然则能够用option:checked来替代,比如下边那样。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> option:checked { color: red; } </style> </head> <body> <form> <select> <option>1</option> <option>2</option> <option>3</option> </select> </form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        option:checked {
            color: red;
        }
    </style>
 
</head>
<body>
    <form>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </form>
</body>
</html>

云顶集团最新域名 7

三  empty伪采用器

其生机勃勃选用器有一点看头,在jquery中称之为”内容选用器“,正是用来搜寻空成分的,借使玩转jquery的empty,这一个也从没怎么难题,

上面举个例证,让第两个空p的背景变色。

XHTML

<!DOCTYPE html> <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> p:first-child{ width:500px; height:20px; } p:empty { background:red; } </style> </head> <body> <p></p> <p>他好</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
 
        p:first-child{
            width:500px;
            height:20px;
        }
 
        p:empty {
            background:red;
        }
    </style>
 
</head>
<body>
    <p></p>
    <p>他好</p>
</body>
</html>

云顶集团最新域名 8

四:not(xxx) 伪接收器

同样那个也是格外杰出的not选取器,在jquery中称之为”基本接受器“,想起来了未有???

云顶集团最新域名 9

看来,当您看完上边那些,是否认为css3中已经融合了部分”脚本管理作为”,这种以为正是极其css再亦不是你曾今认知的极其css了。

云顶集团最新域名 , 赞 1 收藏 评论

云顶集团最新域名 10

浅析 Bootstrap 的 CSS 类名设计

2014/05/08 · CSS · CSS

本文由 伯乐在线 - CSS魔法 翻译。未经许可,禁绝转发!
克罗地亚共和国(Republika Hrvatska卡塔尔语出处:markdotto。招待参加翻译组。

翻译注:方今在再一次设计贰个 UI 框架,由此也在察看一些好像项指标风味和因素。在读到《Bootstrap 编码标准》时,顺着链接开采了其笔者 @mdo 的黄金年代篇小说,当中讲到 CSS 类名的陈设性思路。

在营造肖似 Bootstrap 那样的 CSS 系统时,保持系统的轻易性、稳定性、灵活性是一定关键的。那并不是易事,越发对于大型集体和体系以来,组件的数目恐怕会变得格外宏大。为了纠正这种意况,你无妨思考用前缀式类名替代链式类名。

在使用 链式类名 方案时,你恐怕会把意气风发三种特定组件的 CSS 选用符写成这么:

CSS

.success { ... } .btn.success { .. } .alert.success { ... }

1
2
3
.success { ... }
.btn.success { .. }
.alert.success { ... }

大家在此边设置了叁个大局幼功类 .success,它大概含有了成功开关和成功提醒框之间的具备共性。然后,在单个组件层面,我们又必要对它举行增加或隐瞒。可是,这种完全开放式的类名和链式风格令开辟者面对一些劳神和隐秘痛点:

  • 其生机勃勃基本功类到底意味着如何
  • 怎样因素会在根层级受到震慑(译注:啥意思?卡塔 尔(英语:State of Qatar)
  • 什么要素得以把 .success 类链到和谐身上
  • 它是不是足以被更加的扩大到更加多的机件上
  • 云顶娱乐游戏平台官网 ,风姿洒脱旦二个 .success 的实例要用白底绿字,而另叁个要用绿底白字,怎么做?

并且这么些主题材料还只是冰山风流浪漫角。这种方案未必很差,但假如可扩大性、简单性和灵活性是您的最高必要,那可能就不是最佳的情势。这个时候,前缀式类名方案恐怕越来越切合你。

前缀式类名 将开辟者引进大器晚成种更简便易行、更易维护的趋势,进而构建一个可扩张的 CSS 系统。当大家抛开正规的根底类的不二等秘书诀,并将各种组件的体制用前缀限定起来时,大家的代码会成为那样:

CSS

.btn-success { ... } .alert-success { ... }

1
2
.btn-success { ... }
.alert-success { ... }

那样一来,底蕴类被设定在组件品级,并不是全方位体系品级。换句话说,大家的底工类成为了 .btn.alert,而不是 .success。全数组件之间都不会产出样式和行事上的竞相困扰,因为大家把组件具备“成功景观”视为贯穿整个系统的意气风发种概念。那正是说,各类组件在“成功”状态下的体制,只有在 概念 层面才是相似的;而对于怎么着 实现 那个样式,是被束缚在种种独立的组件内部的。不用怀恋通用的体制还或许会在哪儿使用,也不用忧虑不可意料的副功能,这种措施使得种种组件特别平静和灵活。

创设组件是一项特别富有攻略性而且重申细节的行事,在一个看似 Bootstrap 的系统中,组件须要自然具备独立性,以加强模块分离度和可定制性。我们透过这种办法来制作越来越好的代码和三个令人喜欢的档案的次序。


NodeJS 开辟者的 10 个不足为奇错误

2015/06/16 · CSS · 1 评论

本文由 伯乐在线 - 刘健超-J.c 翻译,黄利民 校稿。未经许可,防止转发!
匈牙利语出处:www.toptal.com类名设计,强盛的伪选用器【云顶娱乐游戏平台官网】。。应接参预翻译组。

自 Node.js 公之世人的那一刻,就陪伴着表彰和商量的音响。那一个争辩仍在不停,並且并不会快捷藏形匿影。而我们日常忽视掉那些争论发生的缘由,各类编制程序语言和平台都以因一些难点而直面探讨,而这几个难点的发出,是决计于大家什么样运用那几个平台。不管有多难技艺写出平安的 Node.js 代码,或有多轻便写出高并发的代码,该平台已经有异常的短大器晚成段时间,并已被用来建设构造多个数额小幅度、稳健和老成的 web 服务器。那么些 web 服务器伸缩性强,並且它们经过在 Internet 上安居的运作时刻,注脚自个儿的安定团结。

唯独,像其余平台雷同,Node.js 轻巧因开荒者难题而遭到议论。一些乖谬会下落品质,而其他一些难点会让 Node.js 间接崩溃。在这里篇文章里,大家将会聊意气风发聊关于 Node.js 新手的 十二个常犯错误,并让她们通晓怎样防止那个错误,进而成为一名 Node.js 高手。

云顶集团最新域名 11

打字与印刷样式CSS的本领和中央

2013/08/02 · CSS · 2 评论 · CSS

初藳出处: cocss   

不经过任哪个地方理而直接打印网址上的页面会收获叁个不完美的功力。

笔者们WEB开垦人士能够省略利用多少个要点来使之到达较为合适的效应:

  • 行使响应式布局设置打字与印刷的法力
  • 在卓殊的时候打字与印刷背景图片和颜料
  • 增添显得的网站或页面链接,以供参谋
  • 行使css filter 提高打字与印刷的图片效果

制止过度限定

一条广泛准绳,不要加多不需要的牢笼。

CSS

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

 

自家的心得

错误 #1:拥塞事件循环

JavaScript 在 Node.js (就好像在浏览器相仿) 提供单线程实行情况。那代表你的程序不可能况兼执行两部分代码,但能因此 I/O 绑定异步回调函数落成产出。比方:一个出自Node.js 的乞求是到数据库引擎获取一些文书档案,在那同一时间允许 Node.js 静心于应用程序其余一些:

JavaScript

// Trying to fetch an user object from the database. Node.js is free to run other parts of the code from the moment this function is invoked.. // 尝试从数据库中获得三个客商对象。在此个函数履行的少时,Node.js 有空去运营代码此外一些.. db.User.get(userId, function(err, user) { // .. until the moment the user object has been retrieved here // .. 直到用户对象检索到这里的那一刻 })

1
2
3
4
5
6
// Trying to fetch an user object from the database. Node.js is free to run other parts of the code from the moment this function is invoked..
// 尝试从数据库中获取一个用户对象。在这个函数执行的一刻,Node.js 有空去运行代码其它部分..
db.User.get(userId, function(err, user) {
// .. until the moment the user object has been retrieved here
        // .. 直到用户对象检索到这里的那一刻
})

云顶集团最新域名 12

但是,具备计算密集型代码的 Node.js 实例被层层顾客端同期连接推行时,会招致短路事件循环,并使具有客商端处于等候响应状态。总计密集型代码,包含尝试给一个小幅度数组举行排序操作和周转二个卓绝长的巡回等。比如:

JavaScript

function sortUsersByAge(users) { users.sort(function(a, b) { return a.age > b.age ? -1 : 1 }) }

1
2
3
4
5
function sortUsersByAge(users) {
users.sort(function(a, b) {
return a.age > b.age ? -1 : 1
})
}

传闻小 “users” 数组推行 “sortUserByAge” 函数,也许没什么难题,当基于庞大数组时,会严重影响总体品质。倘使在只可以如此操作的景观下,你必须要确认保证程序除了等候事件循环而别无她事(比方,用 Node.js 建立命令行工具的黄金年代局地,整个东西一块运维是没难点的卡塔 尔(阿拉伯语:قطر‎,然后这大概没问题。可是,在 Node.js 服务器实例尝试同时服务广大个客户的事态下,这将是八个消亡性的难点。

假使客户数组是从数据库检索出来的,有个化解办法是,先在数据库中排序,然后再一贯搜索。假诺因急需计算庞大的金融交易历史数据总和,而招致拥塞事件循环,那能够创造额外的worker / queue 来幸免梗塞事件循环。

正如您所看见的,那从没新手艺来缓慢解决那类 Node.js 难点,而各类情景都亟待单独管理。而基本化解思路是:不要让 Node.js 实例的主线程执行 CPU 密集型职业 – 顾客端同期链接时。

针对打印的体制,并非显示屏显示样式

先是,大家须求使用媒体询问(media query卡塔 尔(阿拉伯语:قطر‎针对打印样式设置。

JavaScript

@media print { }

1
2
3
@media print {
 
}

重复针对打字与印刷写CSS样式是未曾需要的,我们只必要针对间隔设置打字与印刷的样式覆盖掉以前的暗中认可样式。

大部的浏览器会自行遵照打字与印刷修改颜色,以节省打字与印刷原料,可是我们仍然尽量的手工业安装一下。

为了达到最棒效果,使颜色清晰明了,大家起码必要包涵一下主题的打字与印刷样式。

JavaScript

@media print { body { color: #000; background: #fff; } }

1
@media print { body { color: #000; background: #fff; } }

对于打字与印刷,大繁多景色下大家没有供给打字与印刷整个页面,只须求打印贰个轻便的能够鼓起要求新闻的页面,那么大家将不相干的意气风发对隐蔽掉(如:导航条、背景图片)。

JavaScript

/* Default styles */ h1 { color: #fff; background: url(banner.jpg); } @media print { h1 { color: #000; background: none; } nav, aside { display: none; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Default styles */
 
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

在编辑打字与印刷样式表的时候,你要在意要运用毫米只怕英寸作为单位实际不是显示屏像素单位,实际的单位对打字与印刷非常的平价。

为了确定保证打字与印刷样式有用,写CSS样式使打字与印刷的内容间距纸张边缘,看起来更加好,须要动用 @page 那个语法:

JavaScript

@media print { h1 { color: #000; background: none; } nav, aside { display: none; } body, article { width: 100%; margin: 0; padding: 0; } @page { margin: 2cm; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
 
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
 
   @page {
      margin: 2cm;
   }
}

为了保障不被跨页打印,如多少个题名和剧情在页面尾部被分别:

JavaScript

h2, h3 { page-break-after: avoid; }

1
h2, h3 { page-break-after: avoid; }

另一中状态是要谨防图片过宽而高于纸张边缘:

JavaScript

img { max-width: 100% !important; }

1
2
3
img {
   max-width: 100% !important;
}

其六个中央是担保 articles 小说标签的剧情,在新的后生可畏页开端:

JavaScript

article { page-break-before: always; }

1
2
3
article {
   page-break-before: always;
}

末段,还要注意列表和图表不被分手在不一致的页:

JavaScript

ul, img { page-break-inside: avoid; }

1
2
3
ul, img {
   page-break-inside: avoid;
}

就算这几个还不全面,但是那是三个地利人和的启幕

后人选拔符最烂

不但品质低下并且代码相当的软弱,html代码和css代码严重耦合,html代码结构暴发变化时,CSS也得改善,那是何其不佳,非常是在大公司里,写html和css的每每不是同一位。

CSS

// 烂透了 html div tr td {..}

1
2
// 烂透了
html div tr td {..}

 

小编观点

自小编自个儿在 CMUI 第大器晚成版中,基本上接受的是随笔初阶所说的“链式类名”风格。比方说,叁个小号开关的组织大概是那般的:

XHTML

<button type="button" class="cmBtn cmLarge">Large button</button>

1
<button type="button" class="cmBtn cmLarge">Large button</button>

而在 Bootstrap 中,肖似的成分是如此的:

XHTML

<button type="button" class="btn btn-lg">Large button</button>

1
<button type="button" class="btn btn-lg">Large button</button>

最开端本身并未感觉这两个有怎么着两样——前八个类名用于挂载框架预约义的按钮样式,后三个类名用于钦定按键的尺寸。把 Bootstrap 源码中兼有的 .btn-lg 替换成 .cmBtn.cmLarge,不就跟自家的 CMUI 同样了嘛?笔者居然认为 Bootstrap 的类命名有一点啰嗦,.btn.btn-lg 中的 btn- 不是再一次了呢?依旧 CMUI 干净利索啊!

但是,看完这篇小说,小编就像体会到 Bootstrap 这种规划的实惠。作者的明白恐怕并不是最先的著小编的落脚点,但也没关种类举出来,仅供参照他事他说加以考察。

错误 #2:调用回调函数多于一次

JavaScript 一直都以依赖于回调函数。在浏览器中,处管事人件是因此调用函数(平常是无名的卡塔 尔(英语:State of Qatar),这一个动作就像是回调函数。Node.js 在推荐 promises 以前,回调函数是异步成分用来相互连接对方的天下无双格局。以往回调函数仍被利用,况兼包开荒者依旧围绕着回调函数设计 APIs。二个关于利用回调函数的见惯司空 Node.js 难点是:不仅仅叁次调用。常常状态下,多个包提供二个函数去异步管理部分事物,设计出来是期望有二个函数作为最后多个参数,当异步职责到位时就能够被调用:

JavaScript

module.exports.verifyPassword = function(user, password, done) { if(typeof password !== ‘string’) { done(new Error(‘password should be a string’)) return } computeHash(password, user.passwordHashOpts, function(err, hash) { if(err) { done(err) return } done(null, hash === user.passwordHash) }) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports.verifyPassword = function(user, password, done) {
if(typeof password !== ‘string’) {
done(new Error(‘password should be a string’))
return
}
 
computeHash(password, user.passwordHashOpts, function(err, hash) {
if(err) {
done(err)
return
}
 
done(null, hash === user.passwordHash)
})
}

专心每一遍调用 “done” 都有三个赶回语句(return卡塔 尔(英语:State of Qatar),而最后贰个 “done” 则可省略再次回到语句。那是因为调用回调函数后,并不会自动终止近日施行函数。假使第四个“return” 注释掉,然后给那一个函数传进二个非字符串密码,引致 “computeHash” 仍旧会被调用。那取决 “computeHash” 如什么地点理那样大器晚成种情况,“done” 恐怕会调用数次。任何一位在别处使用这一个函数大概会变得措手不如,因为它们传进的该回调函数被频繁调用。

只要小心就能够幸免这一个 Node.js 错误。而一些 Node.js 开辟者养成三个见惯司空是:在各样回调函数调用前加多三个 return 关键字。

JavaScript

if(err) { return done(err) }

1
2
3
if(err) {
return done(err)
}

对于广大异步函数,它的再次回到值大概是虚幻的,所以该办法能令你很好地制止那一个主题材料。

背景图片和颜色

对此有些网址,颜色和背景图如故十三分须求要求据守的。倘诺客商是在 webkit 内核浏览器上打字与印刷的话,大家能够强制打字与印刷机打字与印刷显示屏上所看见的水彩(即强制在打字与印刷页面上边世任何的背景图和颜料卡塔尔国,平常的话彩色打字与印刷机能够做到这一点,大家要求二个独门的媒体询问:

JavaScript

@media print and (color) { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

1
2
3
4
5
6
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

遗憾的是,那不可能马上使用于firefox opera 和IE.

编辑:云顶娱乐 本文来源:类名设计,强盛的伪选用器【云顶娱乐游戏平台

关键词:

  • 上一篇:没有了
  • 下一篇:没有了