优先级与选择器CSS 是有局部作用域的（ShadowDOM）。CSS 选择符有五种：后代关系（空格）；父子关系（>）；相邻兄弟关系（+）；随后兄弟关系（~）；列关系（||）。CSS 优先级有六种：0 级：通配选择器（*，不包括伪元素）、选择符（空格、>、+、~、||）和逻辑组合伪类；1 级：标签选择器；2 级：类选择器、属性选择器和伪类；3 级：ID 选择器；4 级：内联样式；5 级：!important（可以使 JS 无效）。CSS 选择器优先级与 DOM 位置无关。1234567891011121314151617181920212223242526/* 选择器的优先级并不考虑 DOM 的位置，所以背景是绿色 */divp{background:red;}htmlp{background:green;}/* 提升选择器优先级的方法：重复选择器自身 */.paragraph.paragraph{font-size:24px;}/* 提升选择器优先级的方法：使用属性选择器 */.paragraph[id]{color:red;}.paragraph{color:black;font-size:12px;}背景是 green，字体颜色是 red，字体大小是 24px。在 HTML 中，标签和属性都是不区分大小写的，而属性值是区分大小写的。于是，在 CSS 中，标签选择器不区分大小写， ...继续阅读 (14)

css :is() 伪类选择器还是一个正在逐步规范化的新特性，所以在使用上也需要注意一下变动，总之，它可以让我们减少编写重复选择器的次数，实现像 SASS/Less 等 CSS 预处理编译器类似的嵌套语法。 ...继续阅读 (30)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6102本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、关于键盘可访问性所谓“键盘可访问性”，指的是用户只使用键盘访问网站的能力。例如，我们的iMac鼠标没电了，或者鼠标坏了，或者在智能电视中访问我们的网站，此时就只能依赖于键盘访问了。键盘访问网站的常用操作包括：Tab键索引控件元素；Enter键触发当前处于focus状态的点击行为；上下键上下滚动网页；Space空白键滚动一屏网页；Home键返回顶部；End键滚动到底部；等等。其中Tab键索引和Enter键点击是与交互相关的最重要的两个键盘行为。一般的操作行为是这样的，先Tab键按次序不断focus控件元素，包括链接，按钮，输入框等表单元素或者focus设置了tabindex的普通元素，处于focus状态元素，浏览器一般会通过虚框或者外发光的形式进行区分和提示，此时我们在按下Enter回车键，就相当于鼠标点击了这个元素，从而可以前往我们想去的目的地，或者执行我们想要的交互效果。而focus状态元素的标记默认全部都是使用outline属性，因此，类似下面的代码其实是不专业的：* { outline: 0 none; }a { outline: 0 none; }在全局去除元素的out ...继续阅读 (85)

CSS用了许久，对一些伪类熟视无睹，从不想着去搞清楚一下。比如说这个:before:after其实，:before表示该标记前面的样式，反之:after代表设置后面的样式。网页上常常看到有些文字前或后有小图标，用的就是这种样式：对应的代码有：查询清除图标正是这里设置出来的。众所周知，只是一个代表斜体的标记而已，之所以用在这里，只是看中它不占地方，方便设置:before :after而已。那究竟如何设置图标呢？关键在于content这个CSS属性。content代表插入内容，并且似乎常跟:before :after配对使用。像上面这个例子，就可以是.icon-search:before{content:"\e000";/* 放大镜符号 */font-size:16px;}有关这个content属性，还可以对应许多内容，具体可参考http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/如果想将这些插入内容去掉怎么办呢？比如说，伸缩搜索框，按钮未点击前有“查找”二字，点击后字消失：代码就可以这样写：.sb-icon-search:before{conten ...继续阅读 (90)

1. 基本选择器序号选择器名称说明css版本1*通用选择器选择所有元素，包括html和body22div,span标签选择器根据标签选择元素13#id选择器选择指定id元素14.类选择器选择指定class15[attr]属性选择器根据元素属性去选择2-3属性选择器的几种用法[href] {color: red;} [type="password"] {color: red;} [href^="http"] {color: red;} [href$=".cn"] {color: red;} [href*="baidu"] {color: red;} [class~="def"] {color: red;}// 属性值具有多值时，使用如[lang|="en"] {color: red;}// 属性中有'-'时使用，如示例代码：.abc{ border: 1px solid blue } .def{ font-size: large; } .ddd{ font-size: small; } [class~='def']{ color: red }hello world// 蓝框 大字 红色hello world// 蓝框 小字2. 复合选择器序号选择器名称说明 ...继续阅读 (5)

前几天遇到一个页面需求是这样的：一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求：没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。<input type="text" class="input" required> <div class="like">点赞</div> <div class="send">发送</div>.send { display: none; } .input:focus ~ .send { display: block; } .input:valid ~ .send { display: block; color: red; } .input:focus ~ .like, .input:valid ~ .like { display: none; }（如果评论框用contenteditable属性的div元素实现，可以用:empty伪类代替:valid。）所以CSS3中的伪类和伪元素非常多，其中一些如果用的巧妙，可以实现很多原本需要JS才可以实现的效果。contented ...继续阅读 (26)

【摘要】考察下面的 HTML 代码片段： <! more 单凭 可以让我们选中所有的`` 标签，what if we wanna specific ones? 譬如只选中第一个。 那你可能已经知道 伪类选择器了，所以选中第一个也不是什么麻烦事情。类似地可以用 选中最后一个指定的元素。 here comes阅读全文 ...继续阅读 (19)

大家好！在早期的网页设计之中，我不得不从试验以及错误之中进行学习总结。那时没有可参考的杂志，也没有像 Codepen 或者其它类似的使用工具。如果有人可以为我指点一下，尤其是CSS方面，都将会是很大的帮助。现在我的经验越来越多，我想和大家分享一个有关于CSS 伪类以及伪元素的总结。如果你是一位前端设计者或开发者，你一定对将要讨论的伪元素以及伪类有所了解并且可能使用过它们。然而我还是建议你看看本文所讲的所有条目选项，你可能会有新的收获。在开始正式讲解之前，让我们先讨论一个问题，关于伪元素和伪类，大家了解“pseudo”的含义么？如果没有相关概念，请参考Dictionary.com网站上的定义:形容词 - 不是真实存在的但是又好像存在；假装的；假的； - 几乎，接近，或想要成为这里就不在重复声明 W3C 上有关的定义，伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是::link,:visited,:hover,:active,:first-child以及:nth-child。这里还有很多，接下来我们将要逐一进行介绍。此外，伪类前面总是加一个冒号(:)。之后跟着伪类的名字或者是括号里面的值，如:nth-child。关于伪元素，它们更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没 ...继续阅读 (44)

【摘要】css-伪类和伪元素无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。一：伪类种类css伪类用于向某些选择器添加特殊的效果二：伪元素种类css伪...阅读全文 ...继续阅读 (12)

【摘要】IE8支持before,after伪类，但在使用iconfont的过程中，发现在伪元素上动态作用样式却不会自动触发元素的重绘，那就让我们来强制重绘吧！阅读全文 ...继续阅读 (123)

【摘要】[1]通配选择器[2]元素选择器[3]类选择器[4]ID选择器[5]属性选择器[6]分组选择器[7]后代选择器[8]相邻兄弟元素选择器[9]伪类选择器[10]伪元素选择器阅读全文 ...继续阅读 (23)

【摘要】引入 提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。 百度一下:after和:before会发现有很多...阅读全文 ...继续阅读 (7)

伪类选择符:nth-child()实现彩色标签云(显示效果，点下面的运行按钮)，源码如下： [runcode]标签云123450607080910011012013014015016017018019020[/runcode] 可以看到上述源码实现了一个由6种颜色组合循环显示的彩色标签云，主要是运用css3新增的伪类选择符:nth-child()实现的，这里该选择符使用的乘法因子(n)的定义包含一技巧在里面：6n+?中的6代表以几种颜色作为一个循环显示，我们用:nth-child()定义了5种颜色，再加上默认的1种颜色（#666）刚才就构成上述的一个颜色循环组合。 要注意的是：E:nth-child(n)中的n 是从1开始计数的，表示匹配父元素的第n个子元素E，这个同jq中的:nth-child(n)也是从1开始计数是一样的，但jq里面的:eq(n)中的n是从0开始计数的，不要混淆；另外乘法因子(n)可以是0, 1, 2, 3, ..., 用代数中的代入法，可验证上述的颜色组合循环显示是否正确无误！ ...继续阅读 (15)

我们知道Sizzle支持的伪类有有很多，为了便于处理被Sizzle分成了两类：单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。 先看"PSEUDO":a. Sizzle的伪类选择器"PSEUDO" 我们先整体看一下有哪些个伪类伪类生成匹配器的源码如下：matcher = Expr.filter[ tokens[i].type ].apply(null, tokens[i].matches );此时tokens[i].type = “PSEUDO”，所以生成伪类匹配器函数是Expr.filter["PSEUDO"]函数"PSEUDO":function( pseudo, argument ) {//伪类名称大小写不敏感//优先Expr.pseudos找到伪类对应的位置伪类函数，不行的话将伪类名称转换成小写形式使用Expr.setFilters//记住setFilters继承至Expr.pseudosvarargs,fn= Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||Sizzle.error("unsupported pseudo: " + ...继续阅读 (22)

我也看过很多Sizzle源码分析的博客，伪类分割器setMatcher介绍的比较少。但是本人认为这是一个比较重要的难点，我第一遍看源码的时候也忽略了。现在回来看第二遍，一定要把这个东东弄懂。a. 伪类分割器setMatcher伪类分隔器对伪类选择器进行分隔处理，返回处理后的最终匹配器。伪类和其他原子匹配器有些不同，伪类具有强制的位置关系，特别是和别的选择器并列的时候。比如"p[name]"中选择器“p”和选择器"[name]"这两者并列且没有强制位置关系，"p[name]" == "[name]p"。但是伪类往往都有强制的位置关系，比如<div id="chua"><a><span>chua的测试用例</span></a><p class="group"><labelfor="age">年龄:</label><input type="text" id="age" value="20" readonly/><p><span class="group"><span></div>CSS选择器为"#chua  .group:first"，$.find("#chua  .group:first" ...继续阅读 (10)

说明：14年学习的jquery源码，搬到这里供大家交流。一、前言Sizzle原来是jQuery里面的选择器引擎，后来逐渐独立出来，成为一个独立的模块，可以自由地引入到其他类库中。我曾经将其作为YUI3里面的一个module，用起来畅通无阻，没有任何障碍。Sizzle发展到现在，以jQuery1.8为分水岭，大体上可以分为两个阶段，后面的版本中引入了编译函数的概念，Sizzle的源码变得更加难读、不再兼容低版本浏览器，而且看起来更加零散。本次阅读的是Sizzle第一个阶段的最终版本jQuery1.7，从中收获颇多，一方面是框架设计的思路，另外一方面是编程的技巧。二、jQuery constructorSizzle来源于jQuery，并且jQuery是一个基于DOM操作的类库，那么在研究Sizzle之前很有必要看看jQuery的整体结构：(function(window, undefined) { var jQuery = function (selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); } jQuery.fn = jQuery.prototype = {...} jQuery.fn.init.prototype = jQue ...继续阅读 (19)

哟~  是不是觉得target有点眼熟?!是的，没错，HTML的<a>标签里面有个target属性，但是呢？今天我不是要讲这个~哈哈！target伪类是css3的新属性。说到伪类，对css属性的人肯定都知道:hover、:link、:visited、:focus等等，target用法跟他们是同出一辙的。官方定义是：URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。如果你是第一次看到这个定义，是不是有点懵？！没关系~程序员要用代码来交流。举个栗子。  <!DOCTYPE html><html><head><style>:target{border: 2px solid blue;background-color: yellow;}</style></head><body><p><a href="#news1">跳转至内容 1</a></p><p><a href="#news2">跳转至内容 2</a></p><p id="news1"&g ...继续阅读 (10)

前些天有人在问说网群里问CSS3伪类选择器的问题，本地测试的时候可以给指定元素应用样式，但是上传到服务器上面就失效了，根据我的观察，这跟服务端肯定没有关系，问题还是出在伪类选择器上面。 ...继续阅读 (33)

一：:before && :after的用法:before如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明：.before:before{content:'you before'; color:red;} <div class="before"> me</div>在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果：//在指定元素的内容 me 前添加了新内容 you before我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 display 属性值来改为block。.before:before{content:'you before'; display:block; color:red;} <div class="before"> me</div>现在我们再来看下效果：//由伪元素 :before 生成新内容区域果然变为了块元素content 属性对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符 ...继续阅读 (22)

最近一直在做移动端的页面，发现很多的坑，这里做一下总结，填填坑……css常见的问题（一）一、iOS键盘首字母自动大写IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样：二、iOS输入框默认内阴影和样式问题在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭，不过加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改：input,textarea {border:0;-webkit-appearance: none;}三、andriod输入框type = "number"存在样式问题去除input[type=number]的默认样式input[type=number] {-moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin:0;}四、输入框光标不居中问题通常，移动端如果我们不设置line-height值时，大部分 ...继续阅读 (23)

CSS选择器优先级与效率优化Date: 7th of Aug, 2015Author: HaoyCn本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇。各类选择器的优先级important声明 1,0,0,0ID选择器 0,1,0,0类选择器 0,0,1,0伪类选择器 0,0,1,0属性选择器 0,0,1,0标签选择器 0,0,0,1伪元素选择器 0,0,0,1通配符选择器 0,0,0,0在上面的选择器中，此外，经测试属性选择器 = 伪类选择器(应用最后一个):last-child{color:red;} [desc]{color:green;}伪类选择器 > 相邻选择器:last-child{color:green;} p ~ p{color:blue;}相邻选择器 = 子选择器 = 后代选择器(应用最后一个)p~p{color:red;} body p{color:blue;} body > p{color:green;}后代选择器 > 标签选择器p ~ p{color:blue;} p{color:green;}样式位置的影响同同级，应用取决于标签和标签的先后顺序元素s ...继续阅读 (18)

一，CSS3 选择器分类二，选择器语法1，基本选择器语法选择器类型功能描述* 通配选择器 选择文档中所以HTML元素E 元素选择器选择指定类型的HTML元素#id ID选择器选择指定ID属性值为“id”的任意类型元素.class 类选择器选择指定class属性值为“class”的任意类型的任意多个元素selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并 2，层次选择器语法选择器类型功能描述E F后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内E>F子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面E~F通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 3，动态伪类选择器语法选择器类型功能描述E:link链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上E:visited 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上E:active用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上E:hover用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏 ...继续阅读 (20)

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;~:p ~ p{color:red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/}[attribute^=value]:选择该属性以特定值开头的元素[attribute$=value]:选择该属性以特定值结尾的元素[attribute*=value]:选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ :实际中可以应用在区分本地链接与外部链接,通过判断是否有http\.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]):first-of-type与:last-of-type:从字面大概能看出来是干嘛使得,第一个这个类型的/最后一个这个类型的...如上图所示,每个元素内的第一个p与最后一个p都应用了该样式;:only-of-type:选择仅仅仅有一个此类型的子元素,不包含子元素的子元素;可以利用:not来实现反选:only-child:选择仅有一个子元素的元素;如果去掉:only-child前边的p,那个孤独的span也会应用该样式;同样可以使用:not反选,简单来说,就是有兄弟节点的p所应用该样式;:nth-child(n):选择第n个子元素,可以结合选择器来限制结合变量n ...继续阅读 (16)

jQuery凭借选择器风靡全球，各大框架类库都争先开发自己的选择，一时间内选择器变为框架的标配早期的JQuery选择器和我们现在看到的远不一样。最初它使用混杂的xpath语法的selector。第二代转换为纯css的自定义伪类，（比如从xpath借鉴过来的位置伪类）的sizzle,但sizzle也一直在变，因为他的选择器一直存在问题，一直到JQuery1.9才搞定，并最终全面支持css3的结构伪类。2005 年，Ben Nolan的Behaviours.js 内置了闻名于世的getElementBySelector，是第一个集成事件处理，css风格的选择器引擎与onload处理的类库，此外，日后的霸主prototype.js页再2005年诞生。但它勉强称的上是，选择器$与getElementByClassName在1.2出现，事件处理在1.3,因此，Behaviour.js还风光一时。本章从头至尾实验制造一个选择器引擎。再次，我们先看看前人的努力：1.浏览器内置寻找元素的方法请不要追问05年之前开发人员是怎么在这种缺东缺西的环境下干活的。那时浏览器大战正酣。程序员发明navugator.userAgent检测进行"自保"!网景战败，因此有关它的记录不多。但IE确实留下不少资料，比如取得元素，我们直接可以根据id取得元素自身（现在所有浏览器都支持这个特性），不通过任何API ,自动映 ...继续阅读 (29)

原文地址：css常用hack突然想起今天早上在CNZZ看到的统计数据，使用IE6、7的用户比例还真多，看到之后我的心都碎了。微软都放弃了为毛还有这么多人不死心？所以说，IE下的兼容还是得做的。 –，–css hack分为3种，即属性hack，IE条件注释hack，CSS选择器Hack1、属性hack对于这个我只想说网上各种答案都有，只知道复制粘贴，好多错误，测试一下不就知道了。.myClass{background-color:#f1ee18;/*所有识别*/background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持，亲测*/background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/background-color:#00deff\9\0;/*IE8、9、10识别*/+background-color:#a200ff;/*IE6、7识别*/*background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}这里要注意的一点用法是在IE6下，.myClass{background:red!important;background:green;}那么，会显示绿色green。如果我这样子写呢 ...继续阅读 (21)

2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。由于Selectors Level 4 specification目前已是工作草案状态，并且Editor’s Draft of the same spec也在进行中(编辑草案通常被视为更有权威)，未来的CSS选择器看起来很明朗了，这篇文章重点介绍没有在之前那篇文章中出现的新选择器。浏览器对这些新特性的支持并不乐观，所以我不建议在生产环境中使用这些新选择器。可以把这篇文章视为当规范进一步完善并且浏览器开始支持CSS4的时候，它会带来什么影响。对于已经被支持的特性，我例举了demo。:read-only 和 :read-write这两个选择器是很简单的。任何可编辑的元素都是read-write状态，反之，元素则是read-only状态。看一下下面HTML:CSS如下：:read-only { outline: solid 1px blue; } :read-write { outline: solid 1px red; }对上述代码的分析如下：开始的两个元素有蓝色的外轮廓，因为在HTML中，它们分别设置了readonly和disabled。第三个 ...继续阅读 (16)

2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。由于Selectors Level 4 specification目前已是工作草案状态，并且Editor’s Draft of the same spec也在进行中(编辑草案通常被视为更有权威)，未来的CSS选择器看起来很明朗了，这篇文章重点介绍没有在之前那篇文章中出现的新选择器。浏览器对这些新特性的支持并不乐观，所以我不建议在生产环境中使用这些新选择器。可以把这篇文章视为当规范进一步完善并且浏览器开始支持CSS4的时候，它会带来什么影响。对于已经被支持的特性，我例举了demo。:read-only 和 :read-write这两个选择器是很简单的。任何可编辑的元素都是read-write状态，反之，元素则是read-only状态。看一下下面HTML:type="text"readonly>type="text"disabled>type="text">contenteditable>CSS如下：:read-only{outline:solid1pxblue;}:read-write{outline:solid1pxred;}对上述代码的分析如下：开始 ...继续阅读 (17)

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上，使用CSS动态改变背景图的位置，并且加上一些线性效果。单个元素通过使用伪类，我们能够通过一个元素画出脸的部分样式渲染为了让效果更加酷炫，我们这里在body上使用radial-gradient添加了微妙的颜色梯度变化，让它更像一个头。body { background: radial-gradient(center, #fff, #fff 50%, #aaa); background-size: 100%; background-repeat: no-repeat; height: 100vh; }接下来，我们给脸定位，嘴巴只是一条黑线，我们使用border来实现。.baymax { border-bottom: 1.5em solid #000; position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -40%); }第一个属性画了一条宽为1.5em的边。然后使用absolute定位，把位置定在容器（body）的中点，这里的50%是跟容器大小相关的。问题是我们现在的元素是从容器的中点的开始，但不是出于中间位置。为了抵消，我们使用transform把元素按照它本身 ...继续阅读 (66)

说到伪选择器，真的让我体会到了CSS的无比强大，强大到自己貌似都不认识CSS了，有点C# 6.0中一些语法糖带给我们的震撼。。。首先我们可以在VS里面提前预览一下。可以看到，上面的伪类有很多很多，多的让我眼都快瞎了。。。下面就挑一些实用性比较强的说一说。一 :nth-child 伪选择器 我们...本文链接：CSS之旅——第三站 强大的伪选择器，转载请注明。 ...继续阅读 (74)

byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4757一、特性表现one: 不能左右:empty伪类CSS3选择器中有个:empty伪类，表示当元素里面什么都没有的时候（包括空格、标签内换行），应用相关样式。在现代web网页开发制作中，非常常用也非常方便。例如，某元素类名是.box, 如下HTML和CSS:.box { background-color: #cd0000; } .box:empty { background-color: #fae6e6; }因为.box里面是空大屁，所以，呈现的背景色就会是下面这样子：假如.box里面有空格，或是文字，或是标签之类：我是文字则，:empty失效，于是，呈现的是靓丽的红色：下面，高能来了，请问，如果我们使用before或after伪元素在.box里面生成内容，:empty伪类还有作用吗？这个问题动动脚趾头想想都知道:empty伪类依然是起作用的………………才™怪呢！你的脚趾头是长脑袋上的吧！这么有学问的问题，咱就不要想当然YY了，写个简易Demo，实践一下，自然出真知！乖，请狠狠地点击这里：:empty伪类和before/after伪元素Demo前面3个框框是让你熟悉:empty伪类的，咱们目光直接落到第四个方块 ...继续阅读 (87)