开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现 先写html结构。 Home About Features Blog Shop 2 再是样式 .link:before{content: "/";margin:0 24px;color: grey;}.link:first-child:before{display:none;} 先用：bofore，设定内容是"/"，前后margin，颜色。再用first-child将第一个...
1. 利用content属性，为元素添加内容修饰： 1） 添加字符串： 使用引号包括一段字符串，将会向元素内容中添加字符串。栗子： a:after { content: "after content"; } 2） 使用attr()方法，调用当前元素的属性的值： 栗子： a:after { content: attr(href); }a:after { content: attr(data-attr); } 3）使用url()方法，引用多媒体文件： 栗子： a::before { content: url(logo.png); } 4) 使用counte...
伪类分为两种：UI伪类 与 结构化伪类 UI伪类：a:link{} a:hover{} a:active{} a:visited{} input[type=text]:focus{} #title-one:target{} 结构化伪类: table tr:nth-child(even){} //even---下标为偶数的子元素 table tr:nth-child(odd){} //odd---下标为奇数的子元素 table tr:first-child{} ...
最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。 正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前...
body{ font-family: cursive; font-size: 14px; } .left{ width:150px; height: 50px; background: #fff; position: relative; margin: 50px 0 0 50px; line-height: 50px; text-align: center; border: 2px solid green; border-...
伪类 伪类与类相似，但又没有类附加标签上。伪类分为UI伪类和结构化伪类。 UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上...
首先来看为w3c给他们的定义： 伪类：用于向某些选择器添加特殊的效果； 伪元素：用于将特殊的效果添加到某些选择器。 。。。。。等于没说！ 为了区分伪类和伪元素： 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 下面用实例来区别两者的不同（用伪类 :first-child 和伪元...
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越牢固，将来...
前段时间在写网页的时候，使用了CSS的伪元素:after来实现样式，故而重温了一下伪类和伪元素。平时实现的时候便是拿出来用，但是真正区分两者的概念的时候却有点混淆了。首先，查看一下W3S对伪类和伪元素的定义：伪类：用于向某些选择器添加特殊效果。伪元素：向某些选择器设置特殊效果。对于我这种理解能力比较差的人来说，恕我直言，这两句话貌似……这是一个概念吧？从这两个概念，我们可以知道：1.二者都与选择器有着密不可分的...
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...
CSS 伪元素用于向某些选择器设置特殊效果。语法：selector:pseudo-element {property:value;}(1):first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:p:first-line{color:#ff0000;font-variant:small-caps;}(2):first-letter 伪元素"first-letter" 伪元素用于向文本的首字母设置特殊样式：p:first-letter{color:#ff000...