关于css伪类 - 相关文章

CSS伪类和伪元素

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

CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. 超链接 - :focus 的使用本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作). :first-child(首个子对象) 本例演示 :first-child 伪类的用法. :lang(语言) 本例演示 :lang 伪类的用法. 语法伪类的语法: selector : ps…

CSS伪类选择器

一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上a:active {color: #0000FF} 选定的链接在<body></body>内<a href=”链接地址”>链接内容文字</a>伪类选择器还可以与css类选择器配合使用a.re…

CSS伪类与CSS伪元素的区别及由来

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

CSS伪类

CSS伪类:控制元素的某种状态语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态状态语法未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{color:#00ffff} 鼠标移动到链接上 a:hover{color:$ffaaaa} 鼠标按下链接 a:active{color:#b4b4b4} 注:如果链接不起作用,请修改链接状态顺序为link--visited--hover-active.…

应用越来越广泛的css伪类

说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码量.开发网页代码的效率也极大提高,今天我就跟大家分享一下学习css伪类的一些小经验. 对于开始接触css的朋友来说,在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码,其实这些就是css伪类代码.简单来说应用css伪类就是增加了一个块. 接下来我们看…

(五)CSS伪类(Pseudo-class)

CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.class : pseudo-class {property: value} 锚伪类: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动…

关于CSS伪类选择器

#CSS伪类选择器 ##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是“某元素的以p元素作为第一子项的那项”,而不是“p元素的第一个子项”. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解. e.g. div p:first-child{colo…

jquery 文字向上滚动+CSS伪类before和after的应用

汇总常用技巧——CSS伪类before和after的应用先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话可以让读者少花些时间! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .span-right:before,.spa…

12、第十二节课，css伪类（转）

一.特殊选择器 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…

【从0到1学Web前端】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…

css伪类伪元素

之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种…

css伪类的说明以及使用(css事件)

CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html 之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的,然后我若无其事的说了句:用CSS事件啊...╮(￣▽￣)╭,然后同事不解的回到座位后在代码中狂找...…

CSS伪类整理笔记

0 伪元素虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别).当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号:: 一个选择器一般来说只能使用一个伪元素,并且伪元素必须处于选择器语句的最后. 常见的伪元素有以下几种: ::after ::before ::first-letter ::…

CSS伪类的理解

因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只是表示了一种状态,a:hover只是表示了鼠标悬浮状态下的a标签,和一般的a标签用法没有区别,a:hover span.title即表示为鼠标悬浮状态的a标签的span的样式,和a span.title 用法没有区别…

js动态改变css伪类样式

首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下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 伪类 (Pseudo-classes)实例

CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态. a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000F…

iconfont作用在css伪类中的写法

iconfont作用在css伪类中需要注意两点: 1.字体声明(font-family: "iconfont";). 2.把字体写成十六进制的Unicode编码.比如:" "写成 content:"\e60a";(&#是开头用以标明这是字符实体,x表示这是十六进制). 举例: .demo:brfore{ font-family: "iconfont"; content:"\e60a"; }…

谈谈css伪类与伪元素

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. 在这里也许有不少人都见过:before,::before这样的写法,估计有些人很纳闷,这两者有什么区别吗? 有疑问,那我们就先把疑问解决了先,不要把疑问留着.其实:before,::before这两种写法都是等效,只是:befor是CSS2的写法,::before是CSS3的写法.双冒号(::)这是CSS3…

css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

1. 链接伪类: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类</title> <style type="text/css"> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /*…

HTML转义字符 Unicode和CSS伪类介绍

CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ p:first-child {font-weight: bold;} /* 伪类来选择元素的第一个子元素 */ a:focus {color:…

【从0到1学Web前端】CSS伪类和伪元素分类： HTML+CSS 2015-06-02 22:29 1065人阅读评论(0) 收藏

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…

jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号不显示,当点击添加一列时,用jQuery过滤选择器只控制第一个不显示小叉号 .rule-delete { position: absolute; right: 16px; top: 11px; width: 20px; height: 20px; background: url("../../hom…

CSS - 伪类和伪元素的区别

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

CSS伪类选择器 - nth-child(an+b):

CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二种:倍数写法:nth-child(an)匹配所有倍数为a的元素.其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n.5n.li:nth-child(3n){background:orange;}/*把…

【关于css伪类】的更多相关文章