“伪”这个词被定义为虚假的东西，表面上似乎是一回事，但行为却像另一回事。因此，当我们提到伪元素或伪类（伪选择器）时，我们的意思是类似于 HTML 元素或类但不在标记中的东西。
因此，HTML比眼睛看到的要多。我们可以使用 CSS 设置UI样式的某些部分，而这些部分在我们的标记中不存在。
在元素上的属性样式中可以看到一个简单的示例，如下所示：placeholder``form input
<form> <input placeholder="Enter Email"> <input placeholder="Enter Password"> </form>
由于 作为 的属性存在，因此它不是 如何取消关闭Windows 11的BitLocker加密？HTML 元素。但是，我们可以通过在 CSS 中定位伪元素来设置样式，如下所示：placeholderinputplaceholder
input::placeholder {
color: red
}
因此，伪元素表示 DOM 的实际部分，它可以使您的代码更加高效。
在本文中，我们的重点是 CSS 文件或目录损坏且无法读取怎么解决？是什么原因导致的？伪选择器。但是，在深入研究之前，我们将通过更多地了解伪元素和伪类来奠定基础，并且，在我们的知识基础上，我们将学习伪选择器。:modal``:modal
让我们在下一节中详细了解伪元素和伪类。
-
什么是伪元素和伪类？
-
伪元素
-
伪类
-
-
CSS ：模态伪选择器
-
：模态伪选择器在行动
-
什么是伪元素和伪类？
在本节中，我们将了解有关伪元素Windows 11如何更改BitLocker密码？三种简单教程教给你和伪类的更多信息。我们将通过详细说明涉及不同伪元素和伪类的代码示例来进一步了解我们的知识。
让我们从伪元素开始。
伪元素
伪元素总是有一个双列 — 以区别于伪类 — 。如下所示：::pseudo-element-name``:pseudo-class-name
// psuedo-element
input::placeholder {
color: red
}
// psuedo-class
input:focus {
color: red
}
如上所述，伪元素表示 DOM 的一部分，但在标记中不可见。我们还提到，它们使您的代码更高效，因为它们提供了一种简单有效的方法来定位和设置DOM样式。
让我们详细阐述一些伪元素，以彩色PDF怎么转为黑白PDF？分享三种实用方法及它们如何使我们能够在 DOM 中定位和设置元素样式。
这是一个CSS伪元素，表示HTML的按钮 - type=“file”的[](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)元素，这似乎不可能设置样式。::file-selector-button
但是，使用伪元素，我们可以轻松地设置此文件上传按钮的样式，如下所示：::file-selector-button
<!-- HTML -->
<form>
<label for="avatar">Choose a profile picture:</label><br>
<input type="file"
name="avatar"
accept="image/png, image/jpeg">
</form>
//CSS
body {
display: grid;
place-items: center;
min-height: 100vh;
background-color: #eee;
}
input[type="file"] {
margin-top: 1rem;
padding: 1.5em;
border: 2px dashed grey;
background-color: #fff;
}
input[type="file"]::file-selector-button {
padding: 1em 1.5em;
border-width: 0;
border-radius: 1rem;
background-color: dodgerblue;
color: #FFFFFF;
font-weight: bold;
transition: all .25s ease-in-out;
cursor: pointer;
margin-right: 1em;
}
在这里，我们得到以下样式的文件上传按钮：
您可以在下面实时查看代码：
The：：before和：：after是迄今为止最强大，可以说是最受欢迎的伪元素。这些伪元素使我们能够在HTML其他元素之前或之后插入内容Windows 10/11应用商店或程序打不开或闪退怎么办？，这完全由CSS代码处理。
请考虑以下代码：
<!-- HTML -->
<div class="summary" id="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
// CSS
body {
padding: 20px;
}
.summary::before, .summary::after {
content: "";
padding: 4px;
margin: 10px auto;
width: 100%;
height: 10px;
display: inline-block;
}
#text::before {
background: red;
}
#text::after {
background: blue;
}
在上面的代码中，我们以类为目标，并在其内容之前插入了一个空字符串。div``summary
我们使用 和伪元素插入了这些内容：::before``::after
伪类
伪类或伪选择器允许我们根据 DOM 元素的状态设置其样式。例如，表示同级元素列表中的第一个子元素，可以使用伪类设置样式。另一方面，表示同级列表中的最后一个子元素 — 子元素。可以使用伪类设置处于此状态的元素的样式。:first-child:first-child:last-child``last-child
伪类的行为就像我们在标记中添加了额外的类一样。这使我们能够减少在标记中使用的类的数量。因此，它们帮助我们编写更干净、更灵活和可维护的代码。
请考虑以下 HTML 代码：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
在上面的 HTML 代码中，我趣知笔记 - 分享有价值的教程！们可以有选择地定位第一个内容和最后一个内容，因为它们的状态，并按如下所示设置它们的样式：li``li
ul {
list-style-type: none;
font-size: 2rem;
text-align: center;
}
ul>li {
margin: 0.5rem;
}
ul>li:first-child {
font-size: 4rem;
}
ul>li:last-child {
font-size: 4rem;
}
在这里，我们得到：
由于元素的状态会因用户的交互而更改，因此伪类使我们能够在用户与 DOM 元素交互时设置它们的样式。这些伪类（也称为动态伪类）的行为就像由于用户的操作而将表示元素状态的类添加到元素中一样。
当用户使用鼠标指针将鼠标悬停在元素上时，该元素是处于悬停状态的按钮。我们可以在悬停状态下使用伪类选择和设置该元素的样式。当用户通过选择元素将焦点放在元素上时，该元素具有处于焦点状态的表单输入。我们可以在焦点状态期间使用伪类选择和样式化该元素。:hover:hover:focus``:focus
但是，在本文中，我们的主要重点是伪选择器，我们将在下一节中开始学习它。:modal
CSS 伪选择器:modal
令人敬畏和强大的是CSS伪选择器或伪类，它提供了一种检测模态元素的内在方法。这使开发人员能够设置这些元素的样式，而无需额外的 CSS 类。:modal
因此，简而言之，伪选择器选择一个处于状态的元素，在该状态中，它不会与外部的其他 DOM 元素交互，直到状态发生变化 — 模态关闭。:modal
:modal伪选择器在行动
可以弹出模式并排除与该模式外趣知笔记网站地图部其他元素的所有交互的元素的一些示例包括：
-
dialog：使用 API 打开的对话框元素showModal()
-
:fullscreen：使用 API 打开时的伪类:fullscreen``requestFullscreen()
让我们通过一些代码示例了解有关伪选择器的更多信息。请考虑以下代码：:modal
<!-- HTML -->
<section id="container">
<dialog>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<button id="close-modal-btn" class="modal-btn">Close</button>
</dialog>
<button id="open-modal-btn" class="modal-btn">Open Modal</button>
</section>
/* CSS */
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: gray;
font-family: "Google Sans", sans-serif, system-ui;
}
:modal {
padding: 8rem;
border: 1px solid black;
border-radius: 2rem;
gap: 3rem;
background: orange;
overflow: hidden;
}
:modal::backdrop {
background: hsl(0 0% 10% / 0.5);
}
:modal[open] {
display: grid;
}
.modal-btn {
padding: 0.8rem 1.5rem;
border: 1px solid black;
border-radius: 1rem;
}
// JavaScript
const Container = document.querySelector("#container");
const DIALOG = document.querySelector("dialog");
Container.addEventListener(
"click",
function (event) {
let modalStyle;
if (event.target.matches("#open-modal-btn")) {
modalStyle = "showModal";
}
if (event.target.matches("#close-modal-btn")) {
modalStyle = "close";
}
DIALOG[modalStyle]();
},
false
);
在上面的代码示例中，我们使用 dialog 元素在标记中创建了一个模态。我们使用 CSS 中的伪类来定位和设计这个模态。在 JavaScript 中，我们曾经监听事件。然后我们设置 - 打开模态或 - 关闭模态。:modalevent-delegationclickmodalStyleshowModal``close
您可以看到此操作并实时播放代码：
结论
在本文中，我们了解了伪元素和伪选择器，它们是伪元素的 CSS 对应物。它们是似乎本质上添加到元素中的类，通常是在用户与 DOM 交互时。我们还看到了它们如何使我们能够减少使用的类数量，并编写更干净、更易于维护的代码。
最后，我们了解了 CSS 伪选择器，它为我们提供了一种定位和样式模式的方法，而无需额外的 CSS 类。:modal
在阅读本文之后，我希望您已经学到了足够的知识，可以使用伪选择器和伪元素开始编写更干净、更易于维护的标记和样式。