Javascript 如何防止样式传播到下一个LI元素？

我有一篇

文章

，上面有一个句子列表（

ol

），每行一句。用户可以按Enter键在新行上创建另一个句子，这会附加一个新的

li

。用户还可以强调句子中的某些文本（使用按钮，但这与问题无关）。问题是，当在强调的文本后按Enter键时，下一个

li

也会“继承”强调。我怎样才能使新的

li

s成为香草

HTML

例如，在“hello”之后添加一个项目会创建一个普通的

li

，而在“world”之后添加一个项目会创建一个强调的项目

---

我想你想要一个

只有第一种风格

CSS

HTML

HTML

根据需要尝试应用：

ol li:before {
   //only rules for before
}
ol li:first {
   //only rules for before
}
ol li {
   //rules for all li within ol
}

---

我通过禁用默认浏览器回调并手动实现所有功能，成功地做到了这一点。这也解决了我遇到的另一个bug（连续两次按Enter键将删除一个

li

，而不是创建一个新的）

唯一的缺点是光标首先移动到数字之前，然后在输入第一个字符后返回到正确的位置

---

我认为强调按钮的代码是这里的关键。很可能它无法添加结束标记。。它添加正确，例如，

world

谢谢，但我需要在

之前添加
伪选择器进行编号。@dimid那么您可能需要在元素上添加另一个类。
li
s也需要是同级而不是嵌套。我如何将类添加到
li
s？它们是在用户按Enter键后由浏览器添加的，不是由我的代码添加的。@dimid您可以有两条规则吗。。。之前和第一次？
body {
  counter-reset: item !important;
}

article#xml ol {
  list-style: none;
}

article#xml ol li {
  line-height: 1.5;
  font-family: sans-serif;
  margin-top: 14px;
  counter-increment: item;
}

#xml ol li:before {
  content: counter(item);
  color: #888;
  border-right: solid 1px #c4c4c4;
  margin-right: 14px;
  text-align: center;
  font-size: 12px;
  display: inline-block;
}

ol li:first {
....
}

<ol>
    <li></li> /*styling from the above*/
    <li></li> /* NO styling from the above rule */
</ol>

ol > li {
....
}

<ol>
    <li> /*styling from the above*/
        <li></li> /* NO styling from the above rule*/
    </li>
</ol>

ol > li: first {
....
}

ol li:before {
   //only rules for before
}
ol li:first {
   //only rules for before
}
ol li {
   //rules for all li within ol
}

$('#xml').on('keydown', function(e) {
  // 13 is Enter
  if(e.keyCode == 13) {
    e.preventDefault();

    // traverse ancestors till the LI
    let oldLi = document.getSelection().anchorNode;
    while (oldLi.nodeName != 'LI') {
      oldLi = oldLi.parentNode;
    }
    const newLi = document.createElement('li');
    $(oldLi).after(newLi);

    // set cursor to the beginning of the new LI
    const range = document.createRange();
    const sel = window.getSelection();
    const newText = document.createTextNode('');
    newLi.appendChild(newText);
    range.setStart(newText, 0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
});