Question

我有article个句子列表（ol），每行一个。用户可以按Enter键在新行上创建另一个句子，该句子会附加新的li。用户还可以强调句子中的某些文本（使用按钮，但为了问题，它无关紧要）。问题是，在强调文本后按Enter键时，下一个li也“继承”重点。如何制作新的li s香草？

HTML

<article id="xml" contenteditable="true">
  <ol>
    <li>hello</li>
    <li><em>world</em></li>
  </ol>
</article>

CSS

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;
}

E.g。在'hello'之后添加一个项目会创建一个vanilla li，而在'world'之后创建一个强调的项目。

Demo

Answer 1

我设法通过禁用默认浏览器回调并手动实现所有内容来实现。这也解决了我遇到的另一个错误（连续两次按Enter键会删除li，而不是创建一个新错误。）

$('#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);
  }
});

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

Demo

Answer 2

你想要其中一个我认为。

只为第一个设置样式。

CSS

ol li:first {
....
}

HTML

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

阻止样式传播到下一个LI元素

CSS

ol > li {
....
}

HTML

<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
}

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

2 个答案: