整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：悦然wordpress建站(悦然建站）
继续分享wordpress建站教程。不管是再好的wordpress主题或插件，它的一些样式都是可能存在一些我们不满意的地方，所以我们有时候可能需要修改wordpress主题或插件CSS样式，以达到我们想要的效果。不过当我们直接修改CSS文件就会发现它不会立即生效，甚至要很久之后才会生效，这是怎么回事呢？
因为缓存！不管是浏览器缓存，还是服务器缓存，甚至是CDN、对象存储的缓存都有可能导致网站的CSS样式不能立即更新，今天悦然建站就给大家分享解决方法。
我们修改CSS文件的常规做法是直接修改主题或插件中的CSS文件，当我们修改了本地CSS文件后，还需要清楚浏览器缓存，刷新CDN缓存，如果使用了对象存储，我们还需要用本地修改过的CSS文件替换对象存储中的CSS文件。
总的来说这种做法非常不方便，很麻烦，而且容易出错，所以悦然建站不推荐大家使用这样的方法。
大多数功能完善的wordpress主题都会提供额外的代码添加功能，比如很多英文外贸wordpress主题的自定义设置中都会有一个【额外CSS】选项，点开之后就可以添加CSS代码。
如果是国内的中文wordpress主题，有一些也提供的额外代码添加功能，比如上图这个，把代码添加进来，然后使用style标签闭合即可。
如果你使用的主题没有添加代码的功能，那么可以使用第三方的插件代码，进入wordpress建站后台，在插件中心搜索就可以找到很多，如上图中的几个都可以。
接下来悦然wordpress建站通过实例教大家添加额外CSS。
如上图所示，悦然wordpress建站几天几才发现我的网站存在一个小问题，就是列表模块的样式存在BUG，太靠边了，导致有些文字溢出了，这非常影响美观。
接下来我们在浏览器在按F12查看源码，然后找到这个列表页的CSS样式，通过测试悦然wordpress建站发现在原来的CSS样式下添加【padding:revert】即可解决问题。
<style>
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
padding: revert;
}
</style>最后只需要把上面的CSS代码添加到主题的的相关设置中，如果是使用的CSS插件，或者是主题的额外CSS功能，那需要把上面的style标签删除，只添加中间的CSS样式即可。
最终的效果如上图所示。
今天的wordpress建站教程就给大家分享到这了，CSS效果对一个网站来说还是挺重要的，网站的大多数显示效果都可以通过CSS样式来调整，大家有时间可以多研究一下。
相信大家在工作中都遇到过这样一些奇怪的现象：
1.为什么我写的z-index没有生效？
2.为什么z-index大的元素却没有盖住z-index小的元素？
3.如何让父元素盖住子元素呢？
以上这些问题都跟CSS层叠上下文有关，OK，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇怪现象背后的原理！
「如果这篇文章有帮助到你，??关注+点赞??鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～」
?
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
?
在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
我们可以这样来理解：
了解了层叠上下文，我们还要知道层叠上下文是如何产生的。
一般来讲有3种方法：
?
层叠等级(stacking level，叫“层叠级别”/“层叠水平”也行)，它决定了「同一个层叠上下文中元素在z轴上的显示顺序（层叠顺序）」，也就是说普通元素的层叠水平优先由层叠上下文决定。
?
?
“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的「层叠上下文和层叠水平是概念」，而这里的「层叠顺序是规则」。
?
从上面产生层叠上下文的方法，我们可以分为CSS2.1与CSS3两类，在CSS3出来之前，相信大家都看过下面这张图：
看到这张图，相信大家最有疑问的是「行内元素的层叠顺序要高于块级元素与浮动元素」。
OK，有疑问就动手实践一遍，看看是不是真是这样：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid saddlebrown;
}
.box1 {
position: relative;
z-index: -1;
background: violet;
}
.box2 {
margin-top: -50px;
margin-left: 50px;
background: salmon;
}
.box3 {
float: left;
margin-top: -50px;
margin-left: 100px;
background: wheat;
}
.box4 {
display: inline-block;
background: greenyellow;
margin-left: -50px;
}
.box5 {
position: relative;
z-index:0;
left: 200px;
top: -50px;
background: palevioletred;
}
.box6 {
position: relative;
z-index: 1;
left: 250px;
top: -100px;
background: gold
}
</style>
</head>
<body>
<div class="box1">1定位z-index<0</div>
<div class="box2">2块级元素</div>
<div class="box3">3浮动</div>
<div class="box4">4行内元素</div>
<div class="box5">5定位z-index=0</div>
<div class="box6">6定位z-index>0</div>
</body>
这个理解起来其实很简单，像border/background属于装饰元素的属性，浮动和块级元素一般用来页面布局，而内联元素一般都是文字内容，并且网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。
?
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
?
了解完上面这些内容，现在我们再来看一看前文提到的两个问题
这个很简单，因为它单独使用时不生效，一定要配合定位属性一起，即只对指定了position属性的元素生效——只要不是默认值static，其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后，弹性元素的子元素也可以生效)
这里我们可以来看一个有趣的现象
<style>
.box1 {
width: 200px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 200px;
background: greenyellow;
}
</style>
<div style="position:relative; z-index:auto;">
<div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div>
</div>
<div style="position:relative; z-index:auto;">
<div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div>
</div>
这么看还挺正常的，z-index值大的在z-index值小的上方。接下来我们稍微改一改，你就能看到奇怪的现象了
<div style="position:relative; z-index:0;">
<div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div>
</div>
<div style="position:relative; z-index:0;">
<div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div>
</div>
这里我们只是把它们父元素的z-index属性从auto改成了0，两种情况的表现却截然相反。
产生这种现象的原因我们也能够从上面的理论中找到答案：**position属性为「非」static值并设置z-index属性为具体数值才能产生层叠上下文**
当z-index为auto时，是一个普通元素，两个box层比较不受父级的影响，按照规则谁大谁上，于是z-index为2的box覆盖值为1的box； 当z-index为0时，会创建一个层叠上下文，此时的层叠规则就发生了变化。层叠上下文特性里最后一条规则，每个层叠上下文都是独立的。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。由于两者z-index都是0，所以，遵循层叠规则后来居上，根据在DOM出现的先后顺序决定谁在上面，于是，位于后面的box2覆盖box1。此时box元素上的z-index是没有任何意义的。
这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？
<style>
.outer {
position: relative;
width: 100px;
height: 200px;
background: salmon;
z-index: 3;
}
.inner {
position: relative;
width: 50px;
height: 200px;
background: cadetblue;
z-index: 1;
}
</style>
<div class="outer">
父元素
<div class="inner">子元素</div>
</div>
有人是不是又有疑惑了？
我们这样来理解，父元素定位+z-index为数值，所以它产生了一个层叠上下文，此时子元素无论怎么设置z-index都不可能在父元素的下方。唯一可以实现的方法是将子元素的z-index设为负值，而父元素只要不产生层叠上下文就可以了。
<style>
.outer {
position: relative;
width: 100px;
height: 200px;
background: salmon;
/**z-index: 3;**/
}
.inner {
position: relative;
width: 50px;
height: 200px;
background: cadetblue;
z-index: -1;
}
</style>
<div class="outer">
父元素
<div class="inner">子元素</div>
</div>
「其余规则看上面层叠顺序的图即可。」
述 | 杨晓兵
编辑 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
编者前记：
编译器是连接人类世界与机器世界之间的一座桥梁，它可将程序员理解的高级语言，转换成程序高效执行的机器码。在 C/C++ 编译器里，有 VC、Borland C++、GCC、Watcom C/C++ 等国外热门编译器，但属于国内自主研发的编译器较少。
毕竟开发一款实用的编译器不易，涉及前端词法、语法分析、语意分析、大量的编译优化等工作。而有一支团队，不惜花费十余年精力完全自主研发出一款 YC 编译器和 YC 浏览器内核。
为何他们不遗余力地自主研发编译器和浏览器内核？这款编译器有何优点呢？下面由 YC 编译器的主要作者之一——杨晓兵，来讲述这背后十多年来的漫漫研发路。
以下为杨晓兵自述：
初衷：“做一些对软件行业进步有帮助的东西”
十多年前，我在中国科学院电子学研究所工作，参与设计一些硬件电路。当时我对硬件的兴趣远超软件，后创业专门从事软件工作。
我在创业的过程中发现，做此类软件虽能赚钱，但无论做得怎样，对软件科学的进步都无丝毫作用。尽管付出很多，却无成就感。
操作系统、数据库、编译器以及浏览器内核是不需要特殊专业知识的、开发难度非常大、最基础的软件产品。
我想从这几种软件中选择其中一项来自主研发，虽然不能肯定做出什么成就，但我有希望能做出一些对软件行业进步有所帮助的东西，使自己不枉踏入软件这个行业。根据当时的情况，我发现可先从浏览器内核下手，于是我除了维护原有产品外，把主要精力都投入到浏览器的研发中。
创新将 C 代码内嵌到 HTML
两年后，我们研发完成浏览器内核的基本功能，如 HTML 的解析和显示、JavaScript 脚本的执行等。
此时，我们发现 HTML 的标准越来越复杂，导致开发难度越来越大，如果按照这样的发展，浏览器内核将无法走入市场。
于是我重新思考：如果把 C 语言处理成像 JavaScript 脚本嵌入到 HTML 中，用内嵌 C 代码的 HTML 超文本做软件的人机交互界面，这款内核应该会有点竞争优势。
于是我们花费两年半的时间将标准 C 语言以 JavaScript 相似的方式在 HTML 中执行，并扩展了一个 HTML 标签：<user>，每个 user 标签都可以用属性 src 指定一个 C 源码文件，user标签的显示界面和所有行为都由它的 C 代码决定。
同时将 C 编译器做成一个函数，用该函数编译生成 C 程序的可执行代码，执行代码可被存入文件或直接执行。此时，我们将编译器取名为 YC 编译器，浏览器内核取名为 YC 浏览器。
三年又三年，漫漫研发路
随后，我们继续完善浏览器内核，将其中的一些内核代码独立出来用内嵌编译器动态编译执行，并将大部分内核源代码开源。
与此同时，我们又遇到一个问题：YC 编译器虽然编译速度较快，生成的却是字节码，执行速度慢，而且与原生代码相互调用（特别是回调函数）的处理相当繁琐。因此用当时的 YC 编译器难以胜任开源代码的编译工作。
为了解决自编译浏览器内核代码的问题，我们决定修改 YC 编译器，使它的字节码转换为原生的执行码，并扩展语法，使之具有少量的 C++ 语法。这个工作持续了三年。
三年后，YC 编译器功能增多，它提供一个函数像调用动态链接库一样直接调用 C 源码中的函数。此时，浏览器内核开源部分都可以用 YC 编译器实时编译执行了。
我们继续改进浏览器内核，将速度很慢的 JavaScript 字节码改为二进制原生代码，使 JavaScript 的执行速度约提高约 100 多倍。同时将浏览器内核代码全部模块化并开源，每个模块都用 YC 编译器动态编译执行，编译器的部分源码也开源（如内嵌汇编编译器源码、反汇编源码、C/C++ 字节码的执行源码等），所有的开源代码均由内嵌的 YC 编译器自动检测编译，动态执行。这个工作大概耗时四年。
开发至此，我想起谷歌和火狐浏览器都已开源，为什么不去看看它们的源代码呢？于是找到这两个浏览器的源码。
当时由于一些原因，我分析谷歌浏览器源码没有编译通过，而火狐的源码很顺利就编译成功了，于是我就走上了分析火狐源码之路。
下载的火狐源码由纯 C 代码和 C++ 代码两部分组成，经 Visual C++ 2013 编译生成一个 xul.dll 文件和一个 firefox.exe 文件。
我首先分析了它的 C 代码，将所有的输出函数全部改为类接口，并让 xul.dll 通过 YC 编译器函数 YC_cppLoad 进行实时编译，然后用类接口调用 C 源码中的函数。这一步进行得很顺利，若修改了火狐的 C 代码，只要重新运行火狐浏览器便可生效，无需其它操作。
曾经的办公桌
接下来开始分析火狐 C++ 代码。YC 编译器只实现了少数几个 C++ 语法，不能编译火狐 C++ 代码，故分析起来非常困难。
为什么火狐 C 代码容易分析，而它的 C++ 代码难以分析呢？原来我用 YC 编译器将它的 C 代码生成汇编代码文件、变量结构定义文件、宏定义文件和预编译文件，通过这几个文件，大大减少了分析难度。
因此我再次决定修改 YC 编译器，使之完全支持 C++11 标准，因为火狐 C++ 代码几乎使用了所有的 C++11 语法特性。先使用 STL 标准模板库代码进行编译器的修改和调试，出乎预料，这个过程竟用了三年时间！之后，我用 YC++ 编译器开始调试火狐 C++ 代码。原以为 STL 那么复杂的代码都可以编译通过并正确执行，火狐 C++ 代码应该能很快就编译通过。没想到，很多语法细节 STL 没有用到，而火狐 C++ 源码用到了。于是又继续修改 YC 编译器，对火狐 C++ 的各个模块进行编译，这个过程持续了一年多。
虽然 YC 编译器可以编译全部火狐 C++ 代码，但如何生成执行代码呢？先从主程序 Firefox.cpp 入手，经整理，这个程序可用 YC 编译器生成执行代码 Firefox.exe，并能顺利运行。
由于火狐 C++ 各模块耦合紧密，很难拆分，经过一个多月的工作，仍未能将其拆成多个独立的源码模块以便于用 YC 编译器实时编译，动态执行，这也许是我对火狐 C++ 源码的整体结构还不甚清楚之故，只见其树木不见其森林。
杨晓兵
当我准备对火狐 C++ 代码进行再一次总体分析时，有个偶然的机会参与到一个学校管理系统的开发中，因原有的管理系统经常出故障，操作极其不方便。尽管没有开发 Web 服务程序的经历，但我做的软件与 Web 服务器有极大关系。
经了解，要开发这种管理系统需要的软件有：Apache 或 Nginx 服务器，数据库 MySQL 或其它，编程工具 ASP 或 JSP 或 PHP 等，于是启发我们自己研发这些工具。YC 的 C/C++ 和 JavaScript 编译器和 HTML 解析器正好派上用场。
经过一段时间，一个稳定的、可任意扩展的、多线程高并发的 HTTP 服务器就完成了。该服务器处理 YSP 文件生成网页传给浏览器。
YSP 是我设计的与 ASP、JSP 和 PHP 功能相似的一种网页编程语言。YC 服务器执行 YSP 文件中的内嵌 C/C++ 或 JavaScript 代码，生成 HTML 超文本传给终端设备。工具做好后，不久便做出了管理系统的雏形，这个雏形在发布的 YC 编译器中可见到。
做了上述这些工作后，我想是时候该写本书介绍一下 YC 编译器了，经过一段时间编写的《YC编译器—多语言程序设计》（暂名）即将出版。
当我把书完成后，便立即投入64位的C/C++和JavaScript编译器的开发，目前开发进展顺利，已进入测试阶段。
编者后记：
三年时间，可将一个呱呱落地的婴儿变成蹦蹦跳跳的幼儿，可将一名懵懂的职场新人变成沉稳的老兵。而杨晓兵团队沉下心，迎难而上，花费三年又三年、再一年、两年、四年的时间只为突破一个个技术难点，最终自研出 YC 编译器和 YC 浏览器内核。
在这过程中，杨晓兵坦言最大的挑战不仅是技术，还有思维的高度。这期间不仅有大量的研发工作，还为了优化，多次重写代码，让他坚持下来的是想为计算机软件科学的发展做贡献的匠心。
目前杨晓兵团队正在开发 64 位 C/C++ 编译器，谈及未来，杨晓兵表示先在国内推广，再走向海外。祝福杨晓兵。
YC编译器传送门：http://www.ycbro.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
