SPO:SPFX Modern Script editor - css class and id suffix changing and breaks styling

Question

I am more of an admin than a developer but I managed to get the SPFx Modern script editor to work in my tenant to facilitate some required cosmetic changes. Unfortunately it seems that the CSS classes and ids are being appended with a suffix that changes on each browser refresh.

What CSS trickery do I need use in the SPFX Modern script editor to select .content instead of .content-150 or ButtonCard root instead of ButtonCard root-151? In either example, if I create some css related to a class (or id) with these appended numbers it will break the next time I load the page because the number appended to the element changes.

Thanks for any help!

Answer 1

The following example for your reference.

CSS style:

<style type="text/css">
div[class^='content-']{
    background-color: green !important;
}
div[class^='ButtonCard root-']{
    background-color: green !important;
}
</style>

jQuery code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div[class^='content-']").css("color","red");
    $("div[class^='ButtonCard root-']").css("color","red");
});
</script>