时间戳

首页 > 解决方案 > 使用 CSS 更改 HTML 跨度样式

html - 使用 CSS 更改 HTML 跨度样式

问题描述

我使用Notion，它没有很多样式选项，但幸运的是，有人制作了一个名为notion enhancer的额外组件，它允许许多选项，包括上传你自己的 css 文件。

这是我的问题：我更改了粗体和斜体文本的颜色，使用 .notranslate 类定位它

这是我原来的CSS：

.notranslate span {
  color:#ff72aa !important;
}

现在，Notion 一定是最近更新过的东西，因为 .notranslate span 现在适用于所有书面文本，无论是粗体、斜体还是两者都没有。我正在尝试找出一种使用 css 来定位粗体和斜体文本的方法，因为我无法更改 html 中的跨度样式。

这就是现在 html 中包含一些斜体字的文本的样子：

<div contenteditable="true" spellcheck="true" placeholder="To-do" data-root="true" class="notranslate" style="max-width: 100%;white-space: pre-wrap;word-break: break-word;caret-color: rgb(55, 53, 47);padding: 3px 2px;text-align: left;flex-grow: 1;"><span>Start Reading </span><span style="font-style:italic" data-token-index="1"><span>The Jasmine Throne</span></span></div>

对于带有粗体字的文本，这就是 html 现在的样子：

<div contenteditable="true" spellcheck="true" placeholder="To-do" data-root="true" class="notranslate" style="max-width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 3px 2px; text-align: left; flex-grow: 1;"><span>Star</span><span style="font-weight:600" data-token-index="1"><span>t Readin</span></span><span>g </span><span style="font-style:italic" data-token-index="3"><span>The Hundred Years' War on Palestine</span></span></div>

本质上，我正在尝试找到一种新方法来更改粗体和斜体文本的颜色，而无需更改其旁边的常规文本。我尝试过这样的事情，但它不起作用：

.notranslate span [style*='font-style:italic;'] {
color:#ff72aa;
}

.notranslate span [style*='font-weight:bold;'] {
color:#ff72aa;
}

如果我只使用样式属性，则更改颜色不起作用（有或没有！important）。

有没有人知道如何在不破坏常规文本的情况下更改 [style*='font-style:italic;'] 和 [style*='font-weight:bold;'] 的颜色？而且我无法触摸 html，因为 Notion 没有使用其代码的选项。我唯一的选择是上传额外的 css 或 js 文件。

我尽力解释了我的问题，但有时我无法解释，所以如果您需要澄清某些事情，请告诉我。对于任何混淆，我深表歉意。

标签： htmlcssbolditalicnotion-api

解决方案

你快到了！样式选择器需要完全匹配，因此您的字体粗细是数字600而不是bold，并且冒号和样式之间的间距需要完美匹配。

如果添加更多样式，这将中断，因为它不再完全匹配。

您的第二个问题是您的属性选择器[style...]需要紧跟在元素名称之后，没有空格。

请参阅下面的示例，其中编辑样式以反映这一点。

.notranslate span[style="font-style: italic;"] {
      color: #ff72aa;
    }
    .notranslate span[style="font-weight: 600;"] {
      color: #ff72aa;
    }
<div
      contenteditable="true"
      spellcheck="true"
      placeholder="To-do"
      data-root="true"
      class="notranslate"
      style="
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
        caret-color: rgb(55, 53, 47);
        padding: 3px 2px;
        text-align: left;
        flex-grow: 1;
      "
    >
      <span>Star</span
      ><span style="font-weight: 600;" data-token-index="1"
        ><span>t Readin</span></span
      ><span>g </span
      ><span style="font-style: italic;" data-token-index="3"
        ><span>The Hundred Years' War on Palestine</span></span
      >
    </div>

推荐阅读