css 样式分享 - 文字配色

效果：

注：第一行最后四个块为挖空块，鼠标移动到其上即可显示内容

代码：(css):

/*  ==高亮== 颜色*/
span[data-type="mark"] {
  font-weight: bold;
  padding: 1.5px !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px,
              rgba(0, 0, 0, 0.533) 0px 0px 3px !important;
  margin-left: 1.5px !important;
  margin-right: 1.5px !important;
}
html[data-theme-mode="light"] span[data-type="mark"] {
  color: rgb(255, 0, 0);
  background-color: #FFF36DFF;

}
html[data-theme-mode="dark"] span[data-type="mark"] {
  color: #FFFF00;
  background-color: #662400FF;
  /* border: 0.8px dashed #FFFFFF; */
}


/*  字体颜色 */
html[data-theme-mode="light"] [style*="var(--b3-font-color1)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(255, 0, 0) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color1)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(255, 119, 85) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color2)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(0, 158, 0) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color2)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(22, 255, 22) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color3)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(0, 85, 224) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color3)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(0, 219, 248) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color4)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(217, 134, 0) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color4)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(255, 255, 0) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color5)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(150, 0, 220) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color5)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(245, 137, 255) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color6)"][style*="color"]{
    font-weight: bold !important;
    color: #FF869C !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color6)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(255, 211, 211) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color7)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(0, 193, 186) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color7)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(0, 177, 171) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color8)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(137, 137, 0) !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color8)"][style*="color"]{
    font-weight: bold !important;
    color: rgb(190, 190, 99) !important;
}

html[data-theme-mode="light"] [style*="var(--b3-font-color9)"][style*="color"]{
    font-weight: normal !important;
    color: #a0a0a0 !important;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-color9)"][style*="color"]{
    font-weight: normal !important;
    color: rgb(124, 124, 124) !important;
}



/* 挖空配色 */

[style*="var(--b3-font-color10)"][style*="color"] {
    padding: 1.5px;
    background:linear-gradient(145deg, #4696cb, #88d4ff) !important;
    color: transparent !important;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    transition: all 1.5s ease;
    white-space: pre-wrap;  
}
[style*="var(--b3-font-color10)"][style*="color"]:hover{
    /* background:linear-gradient(145deg, #4696cb, #88d4ff) !important; */
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}
[style*="var(--b3-font-color10)"][style*="color"]:active{
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}

[style*="color"][style*="var(--b3-font-color11)"]{
    padding: 1.5px;
    background:linear-gradient(145deg, #00bd55, #5cffa5) !important;   
    color: transparent !important;   
    cursor: pointer;
    border-radius: 4px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    transition: all 1.5s ease;
    white-space: pre-wrap;  
}
[style*="color"][style*="var(--b3-font-color11)"]:hover{
    /* background:linear-gradient(145deg, #00bd55, #5cffa5) !important; */
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}
[style*="var(--b3-font-color11)"][style*="color"]:active{
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}

[style*="color"][style*="var(--b3-font-color12)"] {
    padding: 1.5px;
    background: linear-gradient(145deg, #dd7317,#ffba79) !important;   
    color: transparent  !important;   
    cursor: pointer;
    border-radius: 4px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    transition: all 1.5s ease;
    white-space: pre-wrap;  
}
[style*="color"][style*="var(--b3-font-color12)"]:hover {
    /* background: linear-gradient(145deg, #dd7317,#ffba79) !important; */
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}
[style*="var(--b3-font-color12)"][style*="color"]:active{
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}

[style*="color"][style*="var(--b3-font-color13)"] {
    padding: 1.5px;
    background:linear-gradient(145deg, #909090, #e4e4e4); color:transparent !important;   
    color: transparent  !important;   
    cursor: pointer;
    border-radius: 4px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    transition: all 1.5s ease;
    white-space: pre-wrap;  
}
[style*="color"][style*="var(--b3-font-color13)"]:hover {
    /* background-color: #000000 !important; */
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}
[style*="var(--b3-font-color13)"][style*="color"]:active{
    color: #000000 !important;  
    transition-duration: 0.2s !important;
}


/* 荧光（背景）配色 */

[style*="var(--b3-font-background1)"][style*="background"] {
    background-color: rgb(255, 255, 0)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    border: 0.8px dashed rgb(0, 0, 0);
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background1)"][style*="background"]{
    border: none !important;
}

[style*="var(--b3-font-background2)"][style*="background"] {
    background-color: rgb(0, 255, 0)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background2)"][style*="background"]{
    border: none !important;
}

[style*="var(--b3-font-background3)"][style*="background"] {
    background-color: rgb(0, 255, 255)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background3)"][style*="background"]{
    border: none !important;
}

[style*="var(--b3-font-background4)"][style*="background"] {
    background-color: rgb(0, 0, 0)  !important;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background4)"][style*="background"]{
    background-color: rgb(255, 255, 255)  !important;
    color: #000000;
}

[style*="var(--b3-font-background5)"][style*="background"] {
    background-color: rgb(220, 0, 0)  !important;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background5)"][style*="background"]{
    color: #FFFFFF;
    border: 0.8px dashed #FFFFFF;
}

[style*="var(--b3-font-background6)"][style*="background"] {
    background-color: rgb(0, 0, 255)  !important;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background6)"][style*="background"]{
    color: #FFFFFF;
    border: 0.8px dashed #FFFFFF;
}

[style*="var(--b3-font-background7)"][style*="background"] {
    background-color: rgb(0, 135, 0)  !important;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background7)"][style*="background"]{
    color: #FFFFFF;
    border: 0.8px dashed #FFFFFF;
}

[style*="var(--b3-font-background8)"][style*="background"] {
    background-color: rgb(194, 231, 255)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background8)"][style*="background"]{
    color: #000000;
    border: none;
}

[style*="var(--b3-font-background9)"][style*="background"] {
    background-color: rgb(214, 214, 214)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background9)"][style*="background"]{
    background-color: rgb(108, 108, 108)  !important;
    color: #FFFFFF;
    border: 0.8px dashed rgb(255, 255, 255);
}

[style*="var(--b3-font-background10)"][style*="background"] {
    background-color: rgb(255, 185, 185)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background10)"][style*="background"]{
    color: #000000;
    border: none;
}

[style*="var(--b3-font-background11)"][style*="background"] {
    background-color: rgb(253, 218, 171) !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background11)"][style*="background"]{
    color: #000000;
    border: none;
}

[style*="var(--b3-font-background12)"][style*="background"] {
    background-color: rgb(223, 201, 255)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background12)"][style*="background"]{
    color: #000000;
    border: none;
}

[style*="var(--b3-font-background13)"][style*="background"] {
    background-color: rgb(229, 249, 164)  !important;
    color: #000000;
    padding: 1.5px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.5px 1.5px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    font-weight: bold;
    border: 0.8px dashed #000000;
}
html[data-theme-mode="dark"] [style*="var(--b3-font-background13)"][style*="background"]{
    color: #000000;
    border: none;
}