【CSS】CSS 常见伪类和伪元素详解及实例

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/shaotaiban1097/article/details/90757699

伪类和伪元素的异同

相同点：

• 伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。
• 在 CSS2 之前，伪类和伪元素的语法相同。selector.class:pseudo-element {property:value;}

不同点

• 伪类是通过一个抽象的类名（伪类名）捕获不存在的或者普通CSS选择器无法捕获到的信息。
  伪元素是通过一个抽象的元素名（伪元素名）创建一个原本不存在的抽象元素。开发者可以通过操作这个抽象元素来达到影响其他元素的目的。
• 在 CSS3 中，伪类的语法使用单冒号指定伪类名。selector.class:pseudo-element {property:value;}
  伪元素的语法使用双冒号指定伪元素名。selector.class::pseudo-element {property:value;}

常用的伪类（更多请查看官方文档）

• :link 未访问的节点，通常用于 a 标签
• :visited 已访问的节点，通常用于 a 标签
• :hover 鼠标悬浮的节点
• :active 当前选中的节点
• :first-child 第一个子节点
• :last-child 最后一个子节点
• :enabled 启用的元素，通常用于表单
• :focus 当前取的焦点的元素
• :checked 选中的元素，通常用于表单 checkbox 元素
• :disabled 未启用的元素，通常用于表单

<style>
    /*未访问的 a 标签*/
    a:link {
        background-color: red;
    }
    /*已访问的 a 标签*/
    a:visited {
        background-color: yellow;
    }
    /*鼠标悬浮的 a 标签 -- 需放置于 link 和 visited 之后*/
    a:hover {
        background-color: green;
    }
    /*当前选中的 a 标签 -- 需要放置于上面三种状态之后*/
    a:active {
        background-color: purple;
    }
    /* class 为 demo 的类下的第一个 div 子节点下的第一个 p 节点*/
    .demo div:first-child p:first-child {
        background-color: aqua;
        color: blue;
        font-size: 5px;
    }
    /* class 为 demo 的类下的第一个 div 子节点下的最后一个 p节点*/
    .demo div:first-child p:last-child {
        color: cornflowerblue;
        font-size: 30px;
    }
</style>
<div>
	<a href='#' target="_blank">点击此处超链接1</a>
    <a href='/demo01' target="_blank">点击此处超链接2</a>
    <a href='/demo02' target="_blank">点击此处超链接3</a>
    <a href='/demo03' target="_blank">点击此处超链接4</a>
</div>
<hr>
<div class="demo">
    <div>
        <p>第一个 p 节点</p>
        <p>第二个 p 节点</p>
        <p>第三个 p 节点</p>
        <p>第四个 p 节点</p>
    </div>
</div>

常用伪元素

• ::before 元素内容前插入新内容
• ::after元素内容之后插入新内容
• ::first-letter 文本首字母。常用于对文本首字母设置样式
• ::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。
• ::selection 选中的内容。常用于文本。
• ::placeholder 占位符。用于设置占位符的样式。

<style>
    p {
        width: 960px;
        text-indent: 2em;
    }
    /*p 标签第一个字放大*/
    p::first-letter {
        font-size: 40px;
    }
    /*p 标签首行变色*/
    p::first-line {
        color: lightcoral;
    }
    /*p 标签选中变色*/
    p::selection {
        background-color: #360;
    }
    /*p 标签后面追加文本。*/
    /*这里可以插入的内容很多：图标icon、文本、css样式 ……*/
    p::after {
        content: 'From 文学网'
    }
</style>
<div>
    <p>
        有一段青春，留作永恒。剪一段时光，放在最美的段落。好好保存留作永远，时间过去岁月的路过。
        只是多了一道曾经，流年一路改变了我们的模样。送走了我们的青春，留给了我们曾经。
        这样的夜别样的心情，倒影的年华。深夜想用文字表达我内心的段落，可是终究写不出整个心情。
        背着这些流年在岁月里流浪，终究没有安静的场所。来安放我这沉淀的一切，似乎不能放也不能放。
        因为只有装进心里，才最为合适。也没有地方比装进心里，更安全。就这样让这段流年，从此埋在心里。
        不再提起，让时间的尽头。留作无声的永恒。
    </p>
</div>

::after 和 ::before 的实例

这两个伪元素经常被用来合并组合 CSS 样式。
例如：气泡对话框、Icon 小图标等

<style>
    .tip {
        width: 200px;
        height: 100px;
        background: rgb(26, 26, 179);
        border-radius: 20px;
        position: relative
    }

    .tip:after {
        content: "因为我们追加的图形整体旋转了90°。所以追加的文本也会旋转";
        width: 70px;
        height: 30px;
        border: 0 solid transparent;
        border-bottom: 30px solid rgb(26, 26, 179);
        border-radius: 0 0 0 230px;
        margin-top: 20px;
        position: absolute;
        top: 50px;
        left: 20px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
</style>
<div>
    <div class="tip"></div>
</div>