CSS 中的选定文本

问题描述

在这个练习中，我得到了以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>Selected text</title>
</head>
<body>
<div class="container">
  <div class="container_inside">
    <h1>Pseudo-elements</h1>
    <p class="my_paragraph">The Almighty CSS allows you to not only work with
      elements declared in your HTML code but to also customize those parts of
      the page you can not address using simple selectors. This might be the
      customization of the first line of the paragraph,the first letter of the
      paragraph,or even the part of the text user has just selected.</p>
    <p>Here is the list of the most-used pseudo-elements:</p>
    <ul class="my_list">
      <li>::first-line</li>
      <li>::first-letter</li>
      <li>::placeholder</li>
      <li>::marker</li>
      <li>::before</li>
      <li>::after</li>
      <li>::selection</li>
    </ul>
  </div>
</div>
</body>
</html>

任务是“使 .my_paragraph 中的文本在被选中时具有白色和黑色背景。”

这是给出的 CSS 代码：

/* Write your code here */


.my_paragraph::first-line {
    background: linear-gradient(90deg,#9d3ce9,#5fbf85);
    color: white;
}

.my_list li::marker {
    color: #9d3ce9;
}

.container {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.container_inside {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: center;
    text-align: center;
    width: 60%;
}

.my_list {
    text-align: left;
}

所以我在 CSS 部分添加了这一点：

.my_paragraph::selection {
    color: white;
    background-color: black;
}

我错过了什么？为什么这是错误的？

提前致谢

解决方法

添加此项以供选择

 .my_paragraph::selection {
        color: white;
        background-color: black;
    }
 .my_paragraph::-moz-selection { color: white;
        background-color: black;}

您没有将样式添加到 html 文件中！将此添加到您的 html 标题并用您的 css 文件名替换 style.css：

<link rel="stylesheet" href="style.css">

好的，找到了正确的代码：

.my_paragraph::selection {
    color: white;
    background: black;
}

css-selectors selection