我需要通过关注内部 span 来设置 contenteditable block 内的内部 span 元素的样式，它必须在聚焦时突出显示。这有可能吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
</style>
</body>
</html>
最佳答案
为了在聚焦时仅突出显示 span 元素，请在样式表中尝试此操作:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
[contenteditable="true"] span:active {
background-color: red;
}
</style>
</body>
</html>我添加了一个简单的脚本，以便当鼠标离开时元素保持红色。看看:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
</style>
<script>
let selectedElement = null;
const setFocus = e => {
if (selectedElement)
selectedElement.style.backgroundColor = 'antiquewhite';
selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;
if (selectedElement && selectedElement.tagName == 'SPAN')
selectedElement.style.backgroundColor = 'red';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
</script>
</body>
</html>好吧，由于您要求不使用 JavaScript，而且我已经在这个问题上投入了大量时间，这是我的最后一个答案。我知道这不完全正确，但也不完全错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" data-id="123">
<p contenteditable="true">
Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
<p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
</p><span contenteditable="true">maxime</span>
<p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
<p contenteditable="true"> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
p,
span {
display: inline;
}
</style>
</body>
</html>关于html - 通过关注该子元素来设置 contenteditable block 的内部元素的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61598459/