CSS Force span不具有其父样式

Question

I have a span including multiple spans:

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

In JavaScript code I am doing this:

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

In the CSS file I have the style of the class number like this:

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

When the JavaScript function is executed, the numbers are included in the background color change which I don't want to happen.

I tried logging the background color of all numbers and it was empty (no background color) so I know they don't have it.

How can I force the numbers not to have any background color?

I am new to these types of stuff so excuse me. I have looked at other questions here and I believe I might need to change a major thing in here.

I have tried using div instead of span which worked but in the display the div s were on separate lines. I changed their display to inline-block and got them to be in the same line, but the highlighting started behaving just like the spans.

Any ideas?

Answer 1

You can follow one of the 2 approaches

• Specify a default background color for the number class ( As you are setting it to transparent by setting it to none )
• Enclose the pre and post text into a span and specify a background color to them instead of the parent.

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