Python全栈开发学习--HTML--CSS伪类与伪元素--Day2（扩展）

CSS伪类与伪元素

首先在介绍伪类与伪元素之前，先回顾一下CSS选择器的作用，选择器的作用主要是在我们给网页元素添加样式的时候指明是给哪个元素添加样式。

CSS伪类与伪元素的本质作用就是选择器。

既然伪类与伪元素都是提供选择器的作用，那么我们有这么多选择器为什么还要引入伪类与伪元素呢？下面我们先来看几个例子

例一、

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
</ul>

我们发现，如果只有这样的结构，我们想给第二行添加单独的样式的话，按照类选择器或者id选择器的做法，我们需要给第二行添加class属性或者id属性。这样的做法很文档看起来很不清爽。所以我们可以通过给设置第二个<li>的:first-child伪类来为其添加样式

li:first-child {
    color: red
}

例二、

<p>学而不思则罔，思而不学则殆，我们在学习的过程中一定要牢记的思想</p>

当我们遇到了这样一个需求，我们需要给p段落中第一个字添加一个背景颜色，我们回想之前的选择器的做法，是不是只能整体选择p标签添加样式，因此我们可以设置<p>的:first-letter伪元素来为其添加样式

p:first-letter {
    background-color:red;
}

例三、
我们设想这么一个场景，对于拥有很多a超链接的页面来说，用户有一个需求，需要将所有的链接都点击一遍，那么在点击的过程中，我们如何向用户提醒哪一些链接是已经点击过的呢，这时候我们可以使用伪类来添加样式，例如给已经点击过的链接添加红色的背景。

 a:visited {
        background-color: red;
    }

一、伪类与伪元素的异同点

1.1 相同点

（1）本质作用都是选择器，为了操作一些通过普通的CSS选择器无法直接取到的元素，可以说是选择器的扩展。
（2）两者都具有css样式属性，可以设置css样式

1.2 不同点

（1）对象不同

• 伪类： 通过文档中真实存在的标签获取不存在或者CSS选择器无法选取的信息。例如：用户鼠标的状态信息（包括鼠标悬停，鼠标点击等等，这些信息我们无法通过CSS选择器进行选择）
• 伪元素：会创建一个原本不存在的抽象元素，该元素就像沙漠里的海市蜃楼，人能看见，但是实际不存在。例如：创造出一段文本，用户能在页面上看见这段文本，但是无法选择，无法保存，因为其在文档流中不存在。

（2）使用方法：

• 伪类： 只能通过单冒号:指定
• 伪元素：可以单冒号，也可以双冒号（在CSS1、CSS2版本中，伪类和伪元素都是通过单冒号:指定，在CSS3中，为了区分伪类与伪元素，才使用::指定伪元素，但是为了兼容以前的版本，也支持单冒号：的写法）

（3）总结：
伪类对文档中真实存在的元素的一些抽象进行选择，伪元素是新增的假元素，用户只能看见

二、常见的伪类

• :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: '出自 《论语》'
    }
</style>
<div>
    <p>
    学而不思则罔，思而不学则殆。”词解罔：迷惑而无所得 殆：通假“怠”，精神疲倦而无所得 而：连词，表转折。 则：连词，相当于“就”“便”句释 只是学习却不思考就会迷惑而无所得，只是思考却不学习就会精神疲倦而无所得 “这句话为孔子所提倡的一种读书及学习方法。指的是一味读书而不思考，就会因为不能深刻理解书本的意义而不能合理有效利用书本的知识，甚至会陷入迷茫。而如果一味空想而不去进行实实在在地学习和钻研，则终究是沙上建塔，一无所得。告诫我们只有把学习和思考结合起来，才能学到切实有用的知识，否则就会收效甚微。
    </p>
</div>

我们可以发现原文并没有“出自《论语》” 而是我们通过伪元素新增的。出自《论语》属于伪元素，无法选中。

由于本人比较懒惰，用了原文章的例子。特别鸣谢!