伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅. 更好的阅读体验移步:http://yincheng.site/using-before-after 1. 伪元素使用场景 伪元素一般是用于画图,特别是那种无关紧要的分隔线.点之类的小元素,如下图的绿框所示: 上面第一张图的分隔线,就是用before画的.只需要给div套一个类,这个类写一个bef…

什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: 1. 避免全局耦合 这应该是比较常见的耦合.全局耦合就是几个类.模块共用了全局变量或者全局数据结构,特别是一个变量跨了几个文件.例如下面,在html里面定义了一个变量: 在html里面定义全局变量             XHTML   <script> var PAGE = 20; </s…

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line span::after { content: " " } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWr…

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.…

做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::after在一些存在的元素前后添加文字样式等,这些被添加的内容会以具体的UI显示出来,被用户所看到的,但是他们并不存在与dom结构中.CSS3中建议使用::表示伪元素,如:div::before 伪类表示已存在的某个元素处于某种状态,但是通过dom树又无法表示这种状态,就可以通过伪类来为其添加样式.例如a…

目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.css四个基本选择器(标签选择器.类选择器.id选择器.通用选择器) 5.css组合器(重点) 5.1.后代选择器(特征为空格)空格的意思就是后代 5.2.儿子选择器(特征>) 5.3.毗邻选择器(特征为+) 5.4.弟弟选择器(特征为~) 6.css属性选择器 6.1.查找属性名含有name的标签…

一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接添加样式. :visited 向已被访问的链接添加样式. :first-child 向元素的第一个子元素添加样式. :lang 向带有指定 lang 属性的元素添加样式. 例如:在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标…

1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如以下的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn…

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn…

1.伪类选择器(爱恨原则) ---------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------…