防止在内容之前突出显示CSS ::

Question

我在我的应用程序中使用了::before作为我的有序和无序列表，但我发现我的有序列表只是可突出显示的，并且高亮颜色似乎无法更改以匹配我的应用程序的其余部分。

我想要的是禁用Webkit中这些元素的突出显示。不幸的是，这意味着user-select不是一个选项。有什么想法吗？

::之前元素的CSS 的 HTML

＆＃13;

＆＃13;

  ol li p:first-of-type::before {
        content: counter(li) ".";
        text-align: right !important;
        width: 28px;
        margin-right: 6px;
        display: inline-block;
        font-family: 'Droid Sans Mono';
        color: rgba(21, 95, 122, 0.8);
        font-size: 13px;
        letter-spacing: -1px;
        margin-left: -4px;
        font-weight: 700;
        user-select: none;
        line-height: 0px;
        background: none !important;
    }

    ul li p:first-of-type::before {
        content: "-";
        margin-top: -11px;
        display: inline-block;
        margin-left: 6px;
        padding-right: 19px;
        width: 1px;
        /* float: left; */
        transform: scaleY(1.4);
        font-size: 24px;
        font-family: 'Droid Sans Mono';
        color: rgba(21, 95, 122, 0.7);
        line-height: 0px;
        user-select: none;
        background: none !important;
    }

＆＃13;

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox">
   <ol data-key="36">
      <li class="" title="" data-key="29">
         <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p>
      </li>
      <li class="" title="" data-key="32">
         <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p>
      </li>
      <li class="current-item" title="Current Item" data-key="35">
         <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p>
      </li>
   </ol>
   <ul data-key="46">
      <li class="" title="" data-key="39">
         <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p>
      </li>
      <li class="" title="" data-key="42">
         <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p>
      </li>
      <li class="" title="" data-key="45">
         <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p>
      </li>
   </ul>
   <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将list类添加到ol标记中的所有列表中，样式如下

.list{
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
}

下面的代码段

＆＃13;

＆＃13;

ol li p:first-of-type::before {
    content: counter(li) ".";
    text-align: right !important;
    width: 28px;
    margin-right: 6px;
    display: inline-block;
    font-family: 'Droid Sans Mono';
    color: rgba(21, 95, 122, 0.8);
    font-size: 13px;
    letter-spacing: -1px;
    margin-left: -4px;
    font-weight: 700;
    user-select: none;
    line-height: 0px;
    background: none !important;
}

ul li p:first-of-type::before {
    content: "-";
    margin-top: -11px;
    display: inline-block;
    margin-left: 6px;
    padding-right: 19px;
    width: 1px;
    /* float: left; */
    transform: scaleY(1.4);
    font-size: 24px;
    font-family: 'Droid Sans Mono';
    color: rgba(21, 95, 122, 0.7);
    line-height: 0px;
    user-select: none;
    background: none !important;
}
.list{
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
}

＆＃13;

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox">
   <ol data-key="36">
      <li class="list" title="" data-key="29">
         <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="32">
         <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p>
      </li>
      <li class="current-item" title="Current Item" data-key="35">
         <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p>
      </li>
   </ol>
   <ul data-key="46">
      <li class="" title="" data-key="39">
         <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="42">
         <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="45">
         <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p>
      </li>
   </ul>
   <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p>
</div>

＆＃13;

＆＃13;

＆＃13;

备选方案2（似乎在Chrome中运行良好）

将以下属性添加到div容器持有者的所有ul和ol列表

unselectable='on' onselectstart='return false;' onmousedown='return false;'

下面的代码段

＆＃13;

＆＃13;

ol li p:first-of-type::before {
    content: counter(li) ".";
    text-align: right !important;
    width: 28px;
    margin-right: 6px;
    display: inline-block;
    font-family: 'Droid Sans Mono';
    color: rgba(21, 95, 122, 0.8);
    font-size: 13px;
    letter-spacing: -1px;
    margin-left: -4px;
    font-weight: 700;
    user-select: none;
    line-height: 0px;
    background: none !important;
}

ul li p:first-of-type::before {
    content: "-";
    margin-top: -11px;
    display: inline-block;
    margin-left: 6px;
    padding-right: 19px;
    width: 1px;
    /* float: left; */
    transform: scaleY(1.4);
    font-size: 24px;
    font-family: 'Droid Sans Mono';
    color: rgba(21, 95, 122, 0.7);
    line-height: 0px;
    user-select: none;
    background: none !important;
}
.list{
user-select:none !important;
-moz-user-select:none !important;
-webkit-user-select:none !important;
-o-user-select:none !important;
}
ol{
user-select:none !important;
-moz-user-select:none !important;
-webkit-user-select:none !important;
-o-user-select:none !important;
}

＆＃13;

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox" unselectable='on' onselectstart='return false;' onmousedown='return false;'>
   <ol data-key="36">
      <li class="list" title="" data-key="29" unselectable='on' onselectstart='return false;' onmousedown='return false;'>
         <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="32">
         <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p>
      </li>
      <li class="current-item" title="Current Item" data-key="35">
         <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p>
      </li>
   </ol>
   <ul data-key="46">
      <li class="" title="" data-key="39">
         <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="42">
         <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p>
      </li>
      <li class="list" title="" data-key="45">
         <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p>
      </li>
   </ul>
   <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p>
</div>

＆＃13;

＆＃13;

＆＃13;