学习CSS的伪类

2016-02-19 14:16 0 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的学习CSS的伪类,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

和一般的CSS语法不同,CSS伪类的语法有两种。

第一种:

selector:pseudo-class {property: value}

也可以用HTML的class属性来设定伪类。

例句:

a:link {color:red}

第二种:

selector.class:pseudo-class {property: value}

伪类是最常用的伪类。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

例句:

a.c1:link {color:red}

锚(a)伪类

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

锚(a)伪类是最常用的伪类。例句如下:

a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

也可以用HTML的class属性来设定伪类。例句如下:

a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

例句:actived的顺序书写。

注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

来源:https://www.tulaoshi.com/n/20160219/1606583.html

延伸阅读
标签: Web开发
在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。 就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。 很多...
标签: Web开发
选择器 p[name^=my]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以my开头的p元素标签 p[name$=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以my结尾的p元素标签 p[name*=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含my结尾的p元素上 选择器 、 + 、~ 选择器表示受影响的元素是第一个元素的子...
标签: Web开发
CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上标准。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我...
标签: Web开发
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CS...
标签: Web开发
一个多月前总结了《清理浮动的全家》,当时看了之后没什么新鲜的东西也就忽略了,今天偶然又翻到那篇文章,想到了另外一个的方法(N久前在书店翻到的),在网上没看到有人提起过,写出来大家一起讨论下。 HTML: CSS: Firefox下效果:   可见,ul的黄色背景并没有显示出来。 重点来了: 在CSS理加上如下代码 ...

经验教程

300

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部