伪类和伪元素

最新推荐文章于 2025-01-31 10:52:13 发布

长安古意

最新推荐文章于 2025-01-31 10:52:13 发布

阅读量436

点赞数

分类专栏： css基础

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/54316707

版权

css基础专栏收录该内容

3 篇文章

订阅专栏

平时使用伪类和伪元素经常混为一谈，今天看了几篇文章，总结一下
参考文章如下：
http://lib.youkuaiyun.com/article/css3/57025
http://lib.youkuaiyun.com/article/css3/57024

一.怎么区分伪类和伪元素

首先从功能来看，伪类和伪元素都是为了实现基于文档树之外的信息的格式化
1.是否抽象创造了元素

<1>比如伪类:first-child就可以用添加一个class替代

//:first-child
span:first-child{
    color:red;
}
<div>
    <span>1</span>
    <span>21</span>
</div>

//class代替
specialColor{
    color:red;
}
<div>
    <span class="specialColor">1</span>
    <span>21</span>
</div>

<2>伪元素::first-letter 可以用一个元素来模拟实现

div span{
    color:red;
}
<div>
    <span>2</span>017
</div>

div::first-letter{
    color:red;
}
<div>
    2017
</div>

2.伪类可以叠加，伪元素不能叠加且只能居末尾

p:nth-of-type(1):hover{
    color:red;
}

p::selection{
    color:red;
}

3.伪类的优先级同类一致，伪元素同标签一致

二.伪类的学习

这里写图片描述

3.结构伪类
<1>:nth-of-type(n)选择器和:nth-child(n)的区别
点击《nth-of-type(n)和nth-child(n)的区别》

<2>:empty
选择里面没有任何内容的元素

//将所有没有子元素的p标签隐藏
p:empty{
    display:none;
}

<3>:not()
设置除该类元素以外的所有的元素样式

//设置除p元素以外的所有元素背景颜色为#eee
:not(p){
    background-color:#eee;
}

三.伪元素的学习

这里写图片描述
<1>::selection

//将选中的内容字体颜色设置为#ff0000
<style>
::selection{
    color:#ff0000;
}
::-moz-selection{
    color:#ff0000;
}
</style>
<body>
    <h1>请试着选取页面上的文本</h1>
    <p>这是一个段落。</p>
</body>