Question

我的跨度包括多个跨度：

<span id="sp9">
   <span class="comment">/*
     <span class="number">  11     </span>* some text
     <span class="number">  12     </span>* -------------------
     <span class="number">  13     </span>* other text
     <span class="number">  14     </span>* some stuff
     <span class="number">  15     </span>*/
   </span>
</span>

在JavaScript代码中，我这样做：

function highlight(id){
    document.getElementById(id).style.backgroundColor = "gray";
}

在CSS文件中，我有类number类的样式：

.number {
    color: DarkCyan;
    background-color: none !important;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none; 
}

执行JavaScript函数时，numbers包含在我不想发生的背景颜色变化中。

我尝试记录所有numbers的背景颜色，它是空的（没有背景颜色）所以我知道他们没有。

如何强制numbers不要有任何背景颜色？

我不熟悉这些类型的东西，请原谅。我在这里看了其他问题，我相信我可能需要在这里改变一件大事。

我尝试使用div而不是span，但是在展示中，div是分开的。我将display更改为inline-block并将它们放在同一行中，但突出显示的行为就像跨度一样。

有什么想法吗？

Answer 1

您可以遵循以下两种方法之一

指定number类的默认背景颜色（通过将其设置为none将其设置为透明）
将文字前后文字括在一个范围内，并为其指定背景颜色而不是父文字。

<强>＃1

function highlight(id){
    document.getElementById(id).style.backgroundColor = "gray";
}

highlight("sp9");

.number {
    color: DarkCyan;
    background: white;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none; 
}

<span id="sp9">
   <span class="comment">/*
     <span class="number">  11     </span>* some text
     <span class="number">  12     </span>* -------------------
     <span class="number">  13     </span>* other text
     <span class="number">  14     </span>* some stuff
     <span class="number">  15     </span>*/
   </span>
</span>

<强>＃2

.number {
    color: DarkCyan;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none; 
}

.post-text {
  background: gray;
}

<span id="sp9">
   <span class="comment"><span class="post-text">/*</span>
     <span class="number">  11     </span><span class="post-text">* some text</span>
     <span class="number">  12     </span><span class="post-text">* -------------------</span>
     <span class="number">  13     </span><span class="post-text">* other text</span>
     <span class="number">  14     </span><span class="post-text">* some stuff</span>
     <span class="number">  15     </span><span class="post-text">*/</span>
   </span>
</span>

CSS Force不得拥有其父样式

1 个答案: