When I add a special user the css for the special user (editor) becomes strange like a message? How to solve this?

Question

It seems that it is using this css:

#level .qa-form-wide-static a {
    background-color: #27ae60;
    background-image: url('images/icons/mail-white.png');
    background-repeat: no-repeat;
    background-position: 5px center;
    padding: 2px 5px 2px 25px;
    border: 1px solid #1e8449;
    display: inline-block;
    color: #fff;
}
#level .qa-form-wide-static a:hover, #level .qa-form-wide-static a:focus {
    background-color: #2ecc71;
    background-image: url('images/icons/mail-white.png');
    border: 1px solid #25a25a;
    color: #fff;
    text-decoration: none;
}  

 

However, this should only be used by the message field.

Answer 1

Interesting. That has been there since SnowFlat was added (actually before being baptized that way!).

I'd fix this by just applying the style to the first link only. So basically just add a first-child to all the selectors like:

#level .qa-form-wide-static a:first-child {
...
#level .qa-form-wide-static a:hover:first-child, #level .qa-form-wide-static a:focus:first-child {