伪元素、伪类基础理解

前几天同事问我css中单冒号和双冒号是什么意思,我也模糊得很,只有个笼统的概念就是:伪元素和伪类。一直以为,页面布局中很少使用到伪类,结果细细研究发现我们经常使用的hover就是一个最简单的伪类,顿时觉得自己太OUT了,紧跟着这两天都在看这些东西,其实伪类最简单的理解就是用于向某些选择器添加特殊的效果。

具体伪类、伪元素有哪些我就不一一列举,在w3c中列举的很清楚。我主要写写应用的实例。

1.来个简单的,咱们最常用到的向超链接添加不同的颜色:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link {
color: #FF0000
}
a:visited {
color: #000
}
a:hover {
color: #FF00FF
}
a:active {
color: #0000FF
}
</style>
</head>
<body>
<a href="#" target="_blank">点击试试</a>
</body>
</html>

2.稍稍来个复杂点的:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.color:link {
color: #ff0000;
}
a.color:visited {
color: #0000ff;
}
a.color:hover {
color: #ffcc00;
}
a.size:link {
color: #ff0000;
}
a.size:visited {
color: #0000ff;
}
a.size:hover {
font-size: 150%;
}
a.bgcolor:link {
color: #ff0000;
}
a.bgcolor:visited {
color: #0000ff;
}
a.bgcolor:hover {
background: #66ff66;
}
a.fontfly:link {
color: #ff0000;
}
a.fontfly:visited {
color: #0000ff;
}
a.fontfly:hover {
font-family: monospace;
}
a.decoration:link {
color: #ff0000;
text-decoration: none;
}
a.decoration:visited {
color: #0000ff;
text-decoration: none;
}
a.decoration:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p>将鼠标移到链接,看到他们改变布局。</p>
<p><a class="color" href="javascript:void(0);" target="_blank">改变颜色</a></p>
<p><a class="size" href="javascript:void(0);" target="_blank">改变字体大小</a></p>
<p><a class="bgcolor" href="javascript:void(0);" target="_blank">改变背景颜色</a></p>
<p><a class="fontfly" href="javascript:void(0);" target="_blank">改变字体</a></p>
<p><a class="decoration" href="javascript:void(0);" target="_blank">给文字加上下划线</a></p>
</body>
</html>

3.下面来个稍微复杂点的:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移动移动吧</title>
<style type="text/css">
.btn {
display: block;
text-align: center;
width: 73px;
height: 29px;
line-height: 30px;
text-align: center;
text-decoration: none;
border: 1px solid #5a8b56;
background: #72a76e;
color: #f2fff1;
font-size: 14px;
position: relative;
}
.btn:before {
display: block;
width: 72px;
height: 28px;
content: ‘‘;
position: absolute;
border-top: 1px solid #93bb90;
border-left: 1px solid #93bb90;
}
a:hover.btn {
background: #62905e;
border-color: #5a8b56;
}
a:hover.btn:before {
border-color: #527c4e;
}
</style>
</head>
<body>
<a href="javascript:void(0);" class="btn">确 定</a>
</body>
</html>

应该结合JS能有更炫的效果,继续研究中。。。先说这么多,大家有可以参考的资料吗?

伪元素、伪类基础理解,布布扣,bubuko.com

时间: 05-26

伪元素、伪类基础理解的相关文章

CSS中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素 伪元素是在文档中若有实无的元素. 主要有以下几种 :fir

css中伪类/伪元素详解

一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after). 二.常用伪类 伪类 用法 兼容 :link 未访问的链接 主流浏览器都支持 :visited 已访问的链接 主流浏览器都支持 :hover 鼠标划过链接 主流浏览器都支持 :active 已选中的链接 主

伪元素和伪类

相同:都用于给某些选择器添加特殊的效果区别:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因.下面罗列写常见的伪类与伪元素--伪类种类:伪元素种类:CSS3要求对伪元素使用两个冒号以便与伪类进行区别.但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者.

CSS中的伪类和伪元素回顾

伪类   css2.1, 合法伪类只有 a 标签有, link  visited  hover  active p:hover: 现在人人都有, IE7兼容, 其他三个还是只有 a 有. p:foucus: 得到焦点的元素. ----(下面是和表单有关的)----- p:checked: 被选中的元素. p:disabled: 可用的 p:enabled: 不可用的 ----(下面是和节点关系有关的)------ p:empty: 没有任何节点内容的(空格也算内容). p: 匹配文档的根元素,

CSS——伪元素与伪类

伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :visited 对已访问的链接添加样式. :hover 对鼠标悬停时的链接应用样式 :foucs 对鼠标聚焦的链接应用样式 :active 向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式. 对于上述伪类,要遵循顺序书写!! :nth-child(n) 从父元素匹配索引为n的子元素,设置样式

css3中伪类选择器和伪元素介绍

利用html5和css3开发出炫酷的网页,那么对于一个web前端开发者,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素. 类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如:p.left{text-align: left}p.rigth{text-align: right} 伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 最常见的伪类选择器 a:link{ color:

常用伪类、伪元素选择器

伪类选择器 :link                      未访问 :visited    已访问 :hover                   鼠标悬停 :active                  鼠标按下 :not(s)                  匹配不含s选择器的元素 :frist-child            父元素的第一个元素 :last-child            父元素的最后一个元素 :only-child            父元素的唯一一个元

[css选择器]伪元素和伪类

伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素. 比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line). 同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after. 不能用伪元素插入对交互有实质性影响的内容,以避免css不能正确加载.另外,屏幕阅读器也没有统一的方式解释伪元素,有的会直接忽略它们 伪类 原文地址:https://www.cnblogs.com/L-xmin/

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

HTML5简介 万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为:广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势: 新增语义化标签 <header></header> <!-- 头部标签 --> <nav></nav> <!-- 导航标签 --> <article>&l