背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s = document.createElement('style'); s.innerText = style_text; document.head.appendChild(s); } document.onclick = function() { // 添加新的style元素, 覆盖原来的属性,

<style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; position: absolute; height: 2px; top: 4%; width: 3%; left: 2%; margin-top: -1px; background: #51aed9; height: 1.1%; } .htmlbox_close::before { -webkit-tra

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素: 优化前: 优化后: 代码: 优化前: .discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;} 优化后: .discount_tab .tab_a.on s

关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标悬停状态 :active:活动状态     除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等. :focus:选择器用于选取获得焦点的元素. :first-child:某个标签的第一个元素,例:li :last-child:某个标签的最后一个元素. 而且CS

在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1发布于 199

今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submit">开始择日</button> css样式: .form_btn::before{ content: ""; position: absolute; top:0; background:yellow; width:14px; height: 38px; bac

CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} 二.anchor伪类 在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {co

CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝! 以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器. 因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥.要记住一点:对于站点功能很重要的元素还是不要用一些“高

伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 content 属性 3.content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用 空格 连接 注意事项: 规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器. 使用场景: 1.清除浮动 e:after{ content: ""

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link  /

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决

selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 <p> 元素的首行,并为其设置样式. first-letter 选择每个 <p> 元素的首字母,并为其设置样式. before 在每个 <p> 元素的内容之前插入新内容.(IE7及以下不支持) after 在每个 <p> 元素的内容之后插入新内容.(IE7及以下不支持

伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类. 语法:selector:pseudo-class {} :root 选择 html 元素,在声明全局 CSS 变量时很有用. :root { --first-color: #488cff; --second-color: #ffff8c; } #firstPa

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在某个元素之前插入一些内容: ::after/:after 在某个元素之后插入一些内容: ::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式: ::first-line/:first-line 为某个元素的第一行文字使用样式: ::selection

伪类分为两种: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{}

伪类用单冒号 我们平时熟悉的a:link.a:visited.a:hover和a : active 伪元素用双冒号(为了更好的兼容我们也用单冒号) 常用的:before    :after和 :first-line  :first-letter  ::selection 先看三篇博客: http://blog.dimpurr.com/css-before-after/ http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1

:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type [CSS3]选择一个上级元素的最后一个同类子元素 :only-child [CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持) :only-of-type [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持) :nth

伪类: 伪元素:

1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理.   4.元素间的父子与祖先 如果一个元素在另外一个元素的直接上一层,他们就有父子关系 如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系   5.animate的动画叠加解决办法 使用的时候在animate前面放上

最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效,只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功. 下面简单以一个文本作为例子: <!DOCTYPE html> <html> <head> <style> p { color: yellow; } p:active { co