首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 1…

首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式. :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式. :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容. :after 伪元素:":after" 伪元素…

最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / clss::after 等),因为不是 dom 元素,所以 不能直接通过 js 修改其属性,虽然可以通过 切换 dom 元素的 css 样式名进行修改,但是这样就比较复杂了. 参考了一个 帖子 然后进行了一些修改,大概思路如下: 这里使用  windows 8 的工程,js 代码直接写在 defa…

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现…

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式     :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 CSS3中的伪类(注意CSS3级…

曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗暴的方式: 简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} </style> <p>正文内容</p> <script> var css=function(t,s){ s=do…

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性 描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦…

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准…

Link The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In orde…

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att…