CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法:
selector:pseudo-class {property:value;}
CSS类也可以使用伪类:
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用:
a.red:visited {color:#FF0000;}<a class="red" href="css-syntax.html">CSS 语法</a>
如果在上面的例子的链接已被访问,它会显示为红色。
CSS :first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意:在IE8的之前版本必须声明<!DOCTYPE> ,这样 :first-child
才能生效。
匹配第一个 <p>
元素
在下面的例子中,选择器匹配作为任何元素的第一个子元素的 <p>
元素:
<title>菜鸟教程(runoob.com)</title>
<style>
p:first-child
{color:blue;
}
</style>
</head><body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, !DOCTYPE 必须已经声明.</p>
</body>
匹配所有<p>
元素中的第一个 <i>
元素
在下面的例子中,选择相匹配的所有<p>
元素的第一个 <i>
元素:
<title>菜鸟教程(runoob.com)</title>
<style>
p > i:first-child
{color:blue;
}
</style>
</head><body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, !DOCTYPE 必须已经定义.</p>
</body>
匹配所有作为第一个子元素的 <p>
元素中的所有 <i>
元素
在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p>
元素中的所有 <i>
元素:
<title>菜鸟教程(runoob.com)</title>
<style>
p:first-child i
{color:blue;
}
</style>
</head><body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意:IE8必须声明<!DOCTYPE>才能支持:lang伪类。
在下面的例子中,:lang 类为属性值为 no 的q元素定义引号的类型:
<title>菜鸟教程(runoob.com)</title>
<style>
q:lang(no)
{quotes: "~" "~";
}
</style>
</head><body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
所有CSS伪类/元素
更多实例
为超链接添加不同样式
这个例子演示了如何为超链接添加其他样式。
<title>菜鸟教程(runoob.com)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head><body>
<p>将鼠标移至链接上改变样式.</p><p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>
使用 :focus
这个例子演示了如何使用 :focus伪类。
<title>菜鸟教程(runoob.com)</title>
<style>
input:focus
{background-color:yellow;
}
</style>
</head><body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form><p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p></body>
CSS 伪类(Pseudo-classes)相关推荐
- :empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
- CSS特效(1)——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
- html分为哪两种,css伪类分为哪几种
css伪类分为UI伪类和结构化伪类两种.UI伪类分为链接伪类.focus伪类和target伪类.结构化伪类分为[:first-child].[:last-child]和[:nth-child]. CS ...
- html鼠标点击伪类,CSS伪类:CSS3鼠标滑过按钮动画
前言 按钮,对开发者而言,是非常常见的一个功能.前端通常会对按钮加入一些操作交互样式,增加一些用户体验. 比如:hover样式.点击样式.loading样式等.下面我们通过简单示例在学习一下css3动 ...
- CSS 伪类选择器:如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
- 前端学习(219):css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
- css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类,助你提升布局效率!
作者:Chidume Nnamdi 译者:前端小智 来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
- unicode html转义字符,HTML转义字符 Unicode和CSS伪类介绍(示例代码)
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
最新文章
- 区块链技术的标准化和颠覆性
- 清华、北邮等高校研究人员实现具有 160 个目标的基于 SSVEP 的免校准 BCI 系统...
- Hessian的使用以及理解(转)
- python学习费用-Python培训多少钱?学习Python技术成本高?
- [计算数学基础]矩阵微分
- ASP.NET防伪令牌与JSON有效载荷
- [转帖]Sqlcmd使用详解
- python学习:语句
- 移动端日期选择插件rolldate
- Word2Vec学习笔记(五)——Negative Sampling 模型(续)
- 太好了 | 这篇写的太好了!Spring Boot + Redis 实现接口幂等性
- windows下搭建OpenGL ES开发环境
- c语言二叉树的构造输出,C语言数据结构树状输出二叉树,谁能给详细的解释一下...
- maven实战之我见一(maven初识)
- linux多线程如何分配到多核上,Linux多线程编程 多核编程
- 各种图片格式之间的差别
- scala 转换、过滤、分组、排序
- IntelliJ IDEA 15 MAC破解版
- 微服务设计 10 大反模式和陷阱
- 9-vulnhub靶机-Tr0ll-ssh-rsa-private-环境变量-缓冲区溢出提权
热门文章
- vSAN架构解析与6.7功能介绍
- 对象存储 OSS > SDK 示例 > C++ > 数据加密 > 服务器端加密
- 一个网卡配置两个不同网段的IP地址(比如应用道闸项目)
- VMware虚拟化上安装F5负载均衡系统(BIG-IP LTM)
- Java基础学习总结(180)——如何保证API接口安全
- Spring Cloud与微服务学习总结(3)——认证鉴权与API权限控制在微服务架构中的设计与实现(一)
- Linux学习总结(39)——系统管理员应该知道的 20 条 Linux 命令
- 软件工程学习总结(1)——软件测试工具详解
- Mysql学习总结(18)——Mysql主从架构的复制原理及配置详解
- JavaScript学习总结(1)——JavaScript基础