first off, i forgot to mention how to target specific tag in editing view so the previous example require a bit more edit. on how to choose which selector, u r on the right track (by using dev console there).
just rule of thumb, when u select the element you want to format, make sure u have as many classes specified in your snippet. in picture below, i select tag with #obsidian tag and by default the app (evident by app.css:2522 notation) already formatted with .cm-s-obsidian span.cm-hashtag, so u want to match it or have more classes preceding it
here i took the liberty to work out your tag formatting. for custom tag, u can repeat the same block down there and just change the “”. for border-radius and padding, it need to be tackled separately due to how obsidian split between “#” and “”.
if u r using on top of community theme, u need to increase the css specificity (CSS Specificity (w3schools.com))
/* for whatever reason as i tested this, i need to put "initialise",
else the .tag below it won't be captured by obsidian.
if removing works for you, can just remove */
.tag { }
.cm-hashtag,
.tag {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
text-align: center;
text-decoration: none;
display: inline-block;
padding-block: 1px;
margin: 0px 0px;
cursor: pointer;
}
/* border-radius and padding need to be separated as editing view
has split css selector for "#" and "<tag-word>" */
.tag {
border-radius: 14px;
padding-inline: 8px;
}
.cm-hashtag-begin {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
padding-left: 8px;
}
.cm-hashtag-end {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
padding-right: 8px;
}
/* i comment out background-color as it doesn't look good on hover
due to how obsidian split between "#" and "<tag-word>" */
.cm-s-obsidian span.cm-hashtag:is(.cm-hashtag-begin,.cm-hashtag-end):hover,
.tag:hover {
color: white;
/*
background-color: var(--text-accent-hover);
*/
}
/* attribute selector "$=" matches tags that ends with that word
where as "^=" matches tags that starts with that tag */
.cm-s-obsidian span.cm-hashtag[class$="obsidian"],
.tag[href^="#obsidian"]
{ background-color: #4d3ca6; }
.cm-s-obsidian span.cm-hashtag[class$="important"],
.tag[href^="#important"]
{ background-color: red; }
.cm-s-obsidian span.cm-hashtag[class$="complete"],
.tag[href^="#complete"]
{ background-color: green; }
.cm-s-obsidian span.cm-hashtag[class$="inprogress"],
.tag[href^="#inprogress"]
{ background-color: orange; }