
本文共 1914 字,大约阅读时间需要 6 分钟。
CSS伪类是用来添加一些的特殊效果。
解释:在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。
由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
一 、伪类(不存在的类,特殊的类)
定义:不真实存在的类,是一种特殊的类,它表示的元素的一种状态,不是固定某一定
例如:第一名,倒数第一名,鼠标悬浮,鼠标点击等
常见的伪类选择器
语法使用‘:’开头
:first-child 第一个元素
:last-child 最后一个元素
:nth-child() 选中第几个元素
特殊值:
2n或even 偶数
2n+1或odd 奇数
—以上这些伪类都是根据所有的子元素进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type() 选中第几个元素
—功能跟上面相似,不同的是,这是在同类型的子元素中去选择
二、:not() 否定伪类
-将符合条件的元素从选择器中去除 */
需求二:给所有诗句加背景色,除了l1 */
span:first-child{
color: red;
}
li:not(#l1){
background-color: green;
}
li{
/* 去除li的项目符号 */
list-style: none;
}
a{
/* 去除a标签的下划线 */
text-decoration: none;
}
h1{
/* 增加下划线 */
text-decoration: underline;
}
三,超链接中的伪类:
需求一:给未访问过的超链接加红色字体 */
1、:link 没有访问过的状态 */
a:link{
color: orange;
}
需求二:给访问过的超链接加绿色字体 */
2、:visited 访问过的状态 */
a:visited{
color: green;
/* 以下样式不生效 */
font-size: 50px;
background-color: pink;
}
注意:
1、:link和:visited 是a标签独有的伪类
2、由于隐私问题,:link和:visited只能设置字体颜色
需求三:鼠标移入,链接字体变大到30px */
3、:hover 鼠标移入的状态 */
a:hover{
font-size: 30px;
}
h1:hover{
color: green;
background-color: hotpink;
}
需求四:鼠标点击后,增加背景色pink */
4、:active 鼠标点击后的状态 */
a:active{
background-color: pink;
}
div:active{
color: red;
}
/*
注意:
:hover和:active 针对所有的元素
伪类选择器:需求一:让文章的首字母一直为字体为24px */
1、::first-letter 第一个字母 */
需求二:让文章的第一行添加背景色黄色 */
2、::first-line 第一行 */
需求三:让选中的内容,字体为红色 */
3、::selection 选中的内容 */
需求四:在元素开始的位置前+'abc' */
4、::before 在元素的最前面
必须要配合content样式名使用 */
5、::after 在元素的最后面
必须要配合content样式名使用 */
具体代码如下
p::first-letter {
font-size: 34px;
}
p::first-line {
background-color: yellow;
}
p::selection {
color: red;
}
p::before{
content: "你好";
}
p::after{
content: '你也好啊';
}
还学习了一个关于继承的知识点:
/样式的继承(继承祖先的资产)
定义:给父元素或者祖先元素设置有关样式,它会继承到子元素或后代元素上,
优势:一般情况下,样式的继承是对我们开发是有利,不需要额外调整
注意:不是所有的样式都能继承,一般情况布局上样式
共同的祖先元素,设置统一的字体大小、字体颜色、行高、字体等 */
body{
font-size: 12px;
color: #3c3c3c;
}
p{
color: red;
font-size: 30px;
}
今天就学了这么谢谢大家
转载地址:https://blog.csdn.net/qq_18219159/article/details/127971569 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关于作者
