css中的伪类和伪元素

最新推荐文章于 2024-07-28 18:09:15 发布

码代码的程序员

最新推荐文章于 2024-07-28 18:09:15 发布

阅读量588

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_41615439/article/details/104196056

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

:before，::before这俩写法，估计有些人很纳闷，这两者有什么区别

其实:before，::before这两种写法都是等效，只是:befor是CSS2的写法，::before是CSS3的写法。双冒号(::)这是CSS3 规范中的要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。一般情况下为兼容性考虑使用单冒号(:)。

伪类选择器（这里的伪类选择器等效于文中所涉及到的伪类）与我们常用的类选择器的区别是：类选择器可以随便起名，譬如“p.right”，然后在页面p标签的class类中加入类“right”，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。下面是一些我们常见的伪类选择器：

:active —— 样式添加到正在被激活的元素 
:focus —— 样式添加到获得焦点的元素 
:hover —— 样式添加到鼠标悬浮的元素 
:link —— 样式添加到未被访问过的链接 
:visited —— 样式添加到已经访问过的链接 
:first-child —— 样式添加到第一个子元素 
:lang —— 样式添加到指定lang语言的标签

理解伪类可以通过选择器找到那些不存在与DOM树中的信息

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。显然这个些状态并没有存在DOM树的信息里面。

伪元素 - Pseudo-elements

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

上面段话是伪元素的清晰定义，也是伪元素与伪类最大的区别。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

常见的伪元素种类：

:first-letter —— 样式添加到文本首字母
:first-line —— 样式添加到文本首行
:before —— 样式添加到元素之前
:after —— 样式添加到元素之后

伪元素的由两个冒号::开头，然后是伪元素的名称，使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。

例子

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap{
    margin-top:30px;
    text-align:center;
}
.jiantou{
    display:inline-block;
    padding:10px;
    background:#2E963D;
    color:#FFF;
    border-radius:8px;
    
    position:relative;
}

/* 下箭头 */
.jiantou:after{
    display:inline-block;
    content:'';
    border-width:6px;
    border-style:solid;
    border-color: transparent  transparent transparent #ff4d4d;
    margin-left: 6px;
    /* 定位 */
    /* position:absolute; */
    /* left:40%;
    top:100%; */
}
/* 上箭头 */
.jiantou:before{
    display:inline-block;
    content:'';
    border-width:6px;
    border-style:solid;
    border-color:transparent  #ff4d4d transparent transparent;
    margin-right: 6px;
    /* 定位 */
    /* position:absolute; */
    /* left:40%;
    top:-16px; */
}
</style>
</head>

<body>
<div class="wrap">
    <span class="jiantou">LIUCHUAN</span>
</div>
</body>
</html>