• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css伪类和伪元素

Html/Css 薛 陈磊 1839次浏览 0个评论 扫描二维码

作为前端人员,每天要与满屏的标签、元素打交道,通过元素与样式类的结合,呈现出一个个美丽优雅的页面,其中也包括css伪类伪元素的应用,随着前端的发展深入,开发人员运用越来越多的整合技术,使得我们的工作更快捷高效高逼格,下面就来整理一下css中伪类伪元素的应用;

css伪类

什么是css伪类(pseudo-class),伪类就是定义个元素的特殊状态的存在,这个特殊状态乍一听以为是什么高科技的玩意,但其实很好理解,比如一个input选框,默认是enable&unchecked,如果是被禁用了被勾选了,就变成特殊状态了,好吧,给个最容易理解也是官方的案例看看:

/* 未访问的链接样式 */
a:link {
    color: #FF0000;
}

/* 访问过的链接样式 */
a:visited {
    color: #00FF00;
}

/* 鼠标滑过后的链接样式 */
a:hover {
    color: #FF00FF;
}

/* 选中的链接样式 */
a:active {
    color: #0000FF;
}

 如例所示,可以给元素定义相应的伪元素,并且只有在处于定义状态的时候才会生效,调试伪元素的样式的时候,可以借助控制台调控元素的状态:

css伪类和伪元素

并且伪类可以和类搭配使用:

a.highlight:hover {
    color: #ff0000;
}

还有个比较特别的伪元素lang,貌似这个平时用的比较少,就是通过定义不同的lang类型来定义样式:

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
    color:red
}
</style>
</head>
<body>

<p>呵呵<q lang="en">嘿嘿</q>哈哈</p> 

</body>
</html>

就是下面的效果:

css伪类和伪元素

当然css伪元素不止这些,写法也多种多样,不过一般常用的也只有前几个,下面是整理到的css伪类


css 伪类集合:


伪类 例子 描述
:active a:active 选中状态
:checked input:checked 勾选状态
:disabled input:disabled 禁用状态
:empty p:empty p元素无子元素
:enabled input:enabled 激活状态
:first-child p:first-child 父级下的第一个p元素
:first-of-type p:first-of-type 父级下第一个p类型元素
:focus input:focus 选中状态,光标位于当前
:hover a:hover hover状态
:in-range input:in-range 定义在一段范围内的值的input
:invalid input:invalid 所有符合验证条件的元素
:lang(language) p:lang(it) 通过lang(it)来定义的p
:last-child p:last-child 父级下的最后一个p元素
:last-of-type p:last-of-type 父级下最后一个p类型元素
:link a:link 未访问的链接
:not(selector) :not(p) 非p元素
:nth-child(n) p:nth-child(2) 父级下的第n个p元素
:nth-last-child(n) p:nth-last-child(2) 父级下的倒数第二个元素
:nth-last-of-type(n) p:nth-last-of-type(2) 父级的第二个p元素,从最后一个子元素算起
:nth-of-type(n) p:nth-of-type(2) 其父级的第二个子元素
:only-of-type p:only-of-type 当p是其父级的唯一元素类型
:only-child p:only-child 当p是其父级的唯一元素
:optional input:optional 没有“required”标示的input
:out-of-range input:out-of-range 不在特定值范围的input
:read-only input:read-only 带有“readonly”标示的input
:read-write input:read-write 没有有“readonly”标示的input
:required input:required 带有“required”标示的input
:root root 页面根元素
:target #news:target 选择的元素锚点
:valid input:valid 符合验证的元素
:visited a:visited 访问过的

其实还是蛮多的哈,不过确实一般开发中常用的只有几种,反正我是没用完css伪类和伪元素,能达到预想中的开发效果就行,不必强制追求的,有时候还可以配合jquery进行css操作,写法也很简便;

接下来看一下伪元素(pseudo-element),了解过伪类的定义后,就更好理解伪元素了,css伪元素就是定义元素"一部分"的特殊样式,比如定义元素的第一个字符,第一行,在元素的before、after、center中定义内容;语法如下:

selector::pseudo-element {
    property:value;
}

比如定义一个p的第一行:

p::first-line {
    color: #ff0000;
}

向一个元素前或者元素后插入部分内容:

i::before {
    content: url(pic.gif);
}

这种方式常配合字体图标出现在网页中,以一个元素作为载体,将字体图标加入到元素区域显示,如图所示:

css伪类和伪元素

线上实例页面

伪元素不多却应用广泛,意思也好懂,示例如下:

伪元素 例子 描述
::after p::after p元素后插入内容
::before p::before p元素前插入内容
::first-letter p::first-letter p元素中第一个字符
::first-line p::first-line 第一行
::selection p::selection 用户选中区域


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css伪类和伪元素
喜欢 (3)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址