Due to connection problems with my mail server, I hadn't noticed your question for a while. I'll try to compensate for that by not being too succinct.
The order of the CSS rules is relevant. The second rule overrules the first one, and the third one overrules both predecessors.
The first rule colors all background between <mark> and </mark> green. So the following MD text:
tic tac toe
==tic== tac toe
==tic tac toe==
is translated to HTML:
tic tac toe
<mark>tic</mark> tac toe
<mark>tic tac toe</mark>
which is rendered as:
Now let's use Ctrl-F to search for "tac". All three occurrences are highlighted by an orange background:
That's the consequence of the second rule. It says: give all (and only) mark elements having an attribute data-markjs an orange background. Somehow the search action must have tagged all "tac" occurrences in the HTML like this:
tic <mark data-markjs="true">tac</mark> toe
<mark>tic</mark> <mark data-markjs="true">tac</mark> toe
<mark>tic <mark data-markjs="true">tac</mark> toe</mark>
(I learned this from desk7. I couldn't make it visible by Help > Toggle development tools.)
The third rule is something from the past, when the viewer received an extra attribute, i.e. the membership of the class mark-selected. This would highlight the current occurrence of "tac" with a different background, as the editor still does. Joplin has been somewhat defeatured since then, apparently. So you can leave this rule out, or otherwise create it as a preparation for better times.
In the meantime, you can experiment by yourself if you want to get a bit more feeling for the HTML/CSS mechanisms and the interaction with the search facility. Create this note, for instance:
tic <mark data-markjs="true">tac</mark> toe
<mark>tic</mark> <mark class="mark-selected" data-markjs="true">tac</mark> toe
<mark>tic <mark data-markjs="true">tac</mark> toe</mark>
<mark data-markjs="true">tic</mark> tac <span class="mark-selected">toe</span>
<mark extra=true>tic</mark> tac <mark class="mark-selected" extra=true>toe</mark>
<style>
mark { background-color: #BBDD66; }
mark[data-markjs] { background-color: #F3B717; }
mark[data-markjs].mark-selected { background-color: #CF3F00; }
mark[extra] { background-color: yellow; }
mark[extra].mark-selected { background-color: blue; }
</style>
The viewer shows a rather colorful result (1). Now press Ctrl-F. Three backgrounds become white, one green (2). Search for "tic". All occurrences are found and colored (3). Search for "tac" (4). Search for "toe" (5). Close the search bar. No orange backgrounds anymore (2). Leave the note and return to it. All colors are restored again (1).
