你可以使用CSS选择器来定位和设计网页中的元素。一个标准的选择器可能针对一个特定的段落或某一层次的所有标题。伪选择器则更进一步，允许你以更细微的差别来定位页面的某些部分。
伪类针对一个元素的不同状态：例如，当指针悬停在一个链接上时。伪元素允许你针对一个元素的特定部分，例如一个段落的第一行。
所以，不用多说，让我们解释一下伪类和伪元素的基本知识。
什么是 "伪类"？
伪类是一个CSS选择器，可以选择处于特定状态的HTML元素。有些状态是指上下文，例如其类型中的第一个元素。其他的是行为状态，比如当鼠标指针悬停在一个链接上时。它们允许你根据用户的行为来设计内容。尤其是上下文状态，可以帮助你编写灵活、可维护和干净的代码。行为状态为你可能需要使用JavaScript的功能提供了一个捷径。
你可以很容易地识别伪类，因为它们以冒号（:）开头。让我们看看简单和用户行为伪类的几个实例。
简单的伪类实例
首先，我们来写一下HTML代码。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Pseudo-class and Pseudo-element</title> </head> <body> <header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header> <section> <p> Voluptatum fuga, impedit sequi totam numquam assumenda repellat tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora totam deserunt non porro reprehenderit. </p> <p> Dicta totam non iusto labore sapiente numquam hic tempora earum, minima repellendus pariatur fugit nobis ex adipisci, tempore vitae laboriosam harum. Quidem! </p> <p> Suscipit repellendus cupiditate dignissimos eveniet beatae quas laudantium, laboriosam minus iusto, corporis ullam alias porro sequi necessitatibus autem ipsam debitis libero sapiente! </p> <p> Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus. Molestias exercitationem in quia possimus consectetur dolorum sequi veniam quo corporis ullam? </p> <p> Suscipit repellendus cupiditate dignissimos eveniet beatae quas laudantium, laboriosam minus iusto, corporis ullam alias porro sequi necessitatibus autem ipsam debitis libero sapiente! </p> <p> Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus. Molestias exercitationem in quia possimus consectetur dolorum sequi veniam quo corporis ullam? </p> <p> Asperiores illum beatae dolores, dolore quae exercitationem laudantium, officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque reiciendis nostrum saepe aperiam? </p> </section> </body></html>
注意，在同一章节中，有几个段落。要单独为它们设计样式，你可以给每一个单独的类，并使用一个CSS类选择器。但这不是很实用，尤其是当内容可能经常变化时。相反，你可以使用不存在于HTML中的伪类，但仍然允许你对这些元素进行定位和样式化。让我们来看看它是如何工作的。
CSS
body { font-size: 1em;}header { font-size: 3em;} /* Selecting the first paragraph */p:first-child { font-size: 1.3em;} /* Selecting the last paragraph */p:last-child { color: red; text-decoration: underline;} /* Selecting the nth paragraph */p:nth-child(3) { color: blue; font-style: italic;}p:nth-child(4) { color: #666; font-size: 1.9em;}p:nth-child(5) { color: yellowgreen; font-weight: bold;}
输出。
使用简单的伪类，如**:first-child,:nth-child(x), 和,:last-**child，我们可以很容易地选择和设置段落的样式。注意，这些伪类选择的是段落本身，而不是它们的子元素。
用户行动伪类实例
用户行为或行为伪类只在用户与文档交互时适用。最流行的例子之一包括**:link**,:visited,:hover, 和**:focus状态。让我们看看一个链接和一个图像的:hover**状态例子。
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Pseudo-class and Pseudo-element</title> </head> <body> <div class="image-box"> <img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" /> <img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" /> </div> <div> <a href="#">Learn more about Pseudo-classes</a> </div> </body></html>
在这个例子中，有两个图像和一个链接。这些图片被放置在同一个位置，所以你可以通过隐藏一个并显示另一个来切换它们。
CSS
body { font-family: 'Inter', sans-serif;}.image-box { position: relative; width: 70%; margin: 5em; color: #fff;}.image-box img { display: inline-block; position: absolute; left: 0; width: 70%;}.image-box img.img-front:hover{ opacity:0; cursor: pointer;}a { position: absolute; bottom: 2em; left: 3em; text-decoration: none; color: #222; display: inline-block; font-size: 2.5em; font-weight: 600; border-bottom: 5px solid rgb(250, 0, 0);}a:hover { color: rgb(250, 0, 0); border-bottom: none;}
这第一个例子演示了悬停在链接上的效果。CSS改变了它的颜色和边界。
在第二个例子中，你可以看到悬停在图片上的效果。它的不透明度被设置为0，从而有效地使图像透明。
什么是 "伪元素"？
伪元素的行为类似于伪类。请记住，伪类适用于一个现有的元素。同时，一个伪元素的行为就像一个新的HTML元素存在一样。另外，一个伪元素以双冒号（:: ）开头。让我们通过一个例子来看看它是如何工作的。
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Pseudo-class and Pseudo-element</title> </head> <body> <header> <div class="header-img"> <img src="By_Unsplash.jpg" alt="Coding on a laptop" /> </div> </header> </body></html>
现在，我们将使用一个**::before伪元素来添加文本"了解更多"，并使用一个::after**伪元素来添加文本 "**立即购买"，**只使用CSS。我们还将应用position属性，将这些伪元素相对于父容器放置。
body { font-family: 'Inter', sans-serif; color: #666;}img { width: 30em; vertical-align: middle;}.header-img::before { content: "Learn More"; color: #fff; background-color: rgb(75, 159, 192); padding: 0.3em 5em; display: inline-block; position: absolute; top: 25px; left: -70px; transform: rotate(-45deg);}.header-img::after { content: "Buy Now"; color: #fff; background-color: rgb(212, 115, 91); padding: 0.3em 5em; display: inline-block; position: absolute; bottom: 25px; right: -70px; transform: rotate(-45deg);}header { position: relative; overflow: hidden; font-weight: 600;}header,section { width: 30em;}
最后的效果是在图片的左上角和右下角叠加类似 "丝带 "的标签。
掌握伪类和伪元素的方法
CSS的伪类和伪元素，如果使用得当，可以为许多可能性打开大门。一开始你可能会感到不知所措，但练习这种技术是提高你的网页设计技巧的关键。关键是要经常彻底测试你的设计，利用谷歌浏览器的DevTools等功能。
我们希望你已经了解了伪类和伪元素的基本知识。请记住，学习永远不会停止所以，继续探索新的CSS选择器，并尝试在你即将到来的项目中实施和测试它们。
