CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细)
那什么是伪类?
伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式;
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。
由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
那什么是伪元素?
伪元素是通过样式来对指定的元素添加一个用CSS写的子元素;
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。
实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
常见的伪类有哪些?
1、 a标签的伪类:
:link 有链接的
:visited 已访问的
:hover 鼠标移入
:active 点击时的
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意:
- 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
- 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
- 伪类的名称不区分大小写。
2、表单的伪类:
:checked 选中 单选框 多选框
:read-only 只读
:disabled 禁用
:focus 焦点
3、元素选中伪类(伪类选择器常用方法):
:first-child 第一个子元素
:last-child 最后一个子元素
:first-of-type 第一个指定类型的元素
:last-of-type 最后一个指定类型的元素
不管元素位置在哪
:nth-child(an+b) n为整数,取符合对应位置的元素
:nth-child(2n+1) 奇数的子元素
:nth-child(2n) 偶数
:nth-of-type(an+b)
从最后开始数
:nth-last-child(an+b)
:nth-last-of-type(an+b)
常见的伪元素有哪些?
1、:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
p:first-line
{color:#ff0000;font-variant:small-caps;
}
注意:"first-line" 伪元素只能用于块级元素。
2、:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
p:first-letter
{color:#ff0000;font-size:xx-large;
}
注意: "first-letter" 伪元素只能用于块级元素。
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容,在元素最开始的位置创建伪元素。
下面的例子在每个 <h1>元素前面插入一幅图片:
h1:before
{content:url(img01.jpg); //引入图片
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容,在元素最后的位置创建伪元素。
下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after
{content:url(img01.jpg); //引入图片
}
实例应用:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style: none;margin: 0;padding: 0;}.menu>div{width: 80px;text-align: center;height: 40px;line-height: 40px;font-size: 18px;float: left;position: relative;}.menu ul{position: absolute;left: 0;top: 40px;z-index: 2;border: 1px solid #CCC;background-color: #FFF;border-radius: 5px;display: none;}.menu ul>li{width: 80px;text-align: center;font-size: 16px;height: 32px;line-height: 32px;}.menu>div:hover>ul{display: block;}.menu ul>li:hover{background-color: #CCC;cursor: pointer;}.menu::after{content: "";height: 0;display: block;clear: both;}</style>
</head>
<body><div class="menu"><div><span>设置</span><ul><li>搜索设置</li><li>高级设置</li><li>隐私设置</li></ul></div><div>登录</div></div>
</body>
</html>
赶紧点赞收藏运行起来吧!
CSS伪类(Pseudo-classes)、伪元素、伪类选择器相关推荐
- Scala _09样例类(case classes)隐式转换
样例类(case classes) 概念理解 使用了case关键字的类定义就是样例类(case classes),样例类是种特殊的类.实现了类构造参数的getter方法(构造参数默认被声明为val), ...
- class unity 定义类_【Unity学习笔记】C#基础-类(Classes)
1. 行为类 类(class)是物体导向程序(objected oriented programming,OOP)的关键组成部分. functionality>classes>fields ...
- [css] 你对伪类了解多少?分为几大类?
[css] 你对伪类了解多少?分为几大类? :hover ::after ::before :nth-child :nth-of-child :first-child :last-child 总结分为 ...
- [css] :placeholder-shown和:focus-within这两个伪类你有使用过吗?说说看
[css] :placeholder-shown和:focus-within这两个伪类你有使用过吗?说说看 :focus-within 是一个CSS 伪类 ,表示一个元素获得焦点,或,该元素的后代元素 ...
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- CSS鼠标动作的五种状态[伪类选择器]
CSS鼠标动作的五种状态[伪类选择器] 注意事项 设置的样式失效的情况 直接跳过就行了 别纠结 如果发现鼠标互动没反应 你要检查一下 css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式 ...
- [css] 有哪些标签是不支持伪元素的?
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
- [css] 不用换行的标签,怎么伪元素实现换行的效果?
[css] 不用换行的标签,怎么伪元素实现换行的效果? 使用\A 换行,并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';whit ...
- 自学前端第十五天:伪类伪元素和属性选择器和精灵图
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果 ...
- html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
最新文章
- .NET新手系列(六)
- ad 卡尔曼_对Kalman(卡尔曼)滤波器的理解
- 解决关闭hdfs yarn spark hbase时no namenode to stop异常 no master to stop
- 攻防世界-web-ics-04-从0到1的解题历程writeup
- Linux备份检查工具,6种优化Linux系统备份的应用与技巧
- Python基础 列表的详解(纯干货)
- 苹果任命软件主管凯文•林奇为“苹果汽车”项目负责人
- hp dl360安装rhel6.4时找不到硬盘
- 第一个简单的注册页面
- 【Java面试系列】Java微服务面试题
- 人机工程学产品设计案例_专业解读——产品设计
- 性能测试20--Analysis -- 内存与硬盘
- 区块链钱包之ETH钱包生成
- CNN基础——如何设置BatchSize
- selenium定位到元素后获取其属性_selenium定位tr及td,并获取其文本及属性
- 开发者体验:如何更好的呈现错误?
- Predicting microRNA–disease associations from lncRNA–microRNA interactions via Multiview Multitask
- 西安恒智小寨java_长安反编译工具 java
- 拉上谷歌高通 三星围攻苹果
- matlab——corrcoef函数的使用
热门文章
- 7-96 计算存款利息
- Oracle 报错 ORA-01461
- php字符串转数组重命名键,【PHP】字符串转数组、数组转字符串
- 回忆属于我的第五届“飞思卡尔”智能车竞赛
- 两个案例了解购物平台的发票制度
- Whatsup-gold简介
- 计算机科学与工业工程会议,2021年第七届计算机科学与工业工程国际会议(ICCSIE2021)...
- 【论文分享】 Regression Greybox Fuzzing
- MacBook苹果电脑绕过BootCamp安装Win10双系统
- 青岛农商银行计算机防病毒应用培训,农信银资金清算中心——青岛农商银行举办2020年新入职员工培训班...