微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – 自定义SO的片段选择背景

我目前正在尝试用Stylish创建一个黑暗的SO主题.
在我必须自定义代码段之前,一切都很顺利.
我似乎无法将选择颜色更改为除预定义之外的任何颜色:

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
    background:#d7d4f0;
}

我尝试添加这个,但没有任何改变:

.CodeMirror-line::selection,.CodeMirror-line>span>span::selection{
    background: blue !important;
}

反正有没有改变这里的选择背景?

这是主题中的完整CSS,如果它有帮助:

body,#questions div,.qa-block,#content {
    background:#282828 !important;
}

#footer.categories {
    background:#181818 !important;
}

.post-text {
    background:#D5D5D5 !important;
    color:#000000;
}

h1,h2,h3,h4 .page-description td,p,.owner-revision span,.revision span,div.container,#mdhelp pre,.badgecount,.comments,.user-panel-content td,.user-panel-content th,.content-page,.viewcount,.welovestackoverflow,.Vote-count-post,.summarycount,#sidebar.module p .Vote-count-post,.answer-Votes,div.comment-body,h1 a,h4,span.reputation-score,div.module.question-stats p,span.page-numbers,#newsletter-ad,.item-summary,div.new-about-content-page.about-content-page div h2.about-title,.module.newuser,.page-description td,.bulletin-title,.status.answered span,.status.answered div,.label-key b,.excerpt,.answer-help,#mdhelp,.rep-col .rep,.user-card .user-card-name,#avatar-card .reputation {
    color:#C0C0C0 !important;
}

.user-stats .stat span,#avatar-card .badgecount,#badges-table .badges-number {
    color:#666 !important;
}

.revision-comment,.user-info-rep,.user-info-rep .user-details,.nav.mainnavs li a,.tag-container .col,.tar-container .stat .number,.top-tags .tag-wrapper .tag-container .stat .number,.card,.jobs,.login-link.btn {
    color:#C0C0C0 !important;
    background: #303030 !important;
}

.Vote-count-post,.Votes {
    color:#E3E3AC !important;
}

span.count,.badge-tag {
    color: #FFFFFF !important;
}

.stats {
    background-color:#C0C0C0 !important;
}

#questions .status.unanswered {
    color:#C23B22 !important;
}

.status.unanswered span {
    color:#777777 !important;    

}

.diff-delete {
    background:#501010 !important;
}

.diff-add {
    color:#A0E0A0 !important;
    background:#105010 !important;
}

#questions .status.answered,.user-about-me,.stats {
    background:#353535 !important;
}

#reputationGraph,.graph {
    background:#FFF !important;
}

.result-highlight {
    color:#FFFFFF !important;
}

#questions .status.answered-accepted {
    background:#759971 !important;
}


.answer-hyperlink:visited{
    color:#A187BE !important;
}

a,h1>a:visited,.answer-hyperlink,.reputation a:visited {
    color:#6ECFF6 !important;
}

.content-block,.on-topic-examples,.off-topic-examples,.topbar .header,.modal-content,.comment-user,.community-bulletin,.revision td,#nav-askquestion,#tabs a,.tabs a,.nav.mainnavs li,.question-status,#newsletter-ad .company-ad-b,.company-ad-sb,#hero-content,.subtabs a.youarehere,.user-show-new .user-header-slim .data,.page-numbers.current,.other-sites,.topbar .topbar-icon-on,.topbar .topbar-icon-on:hover,.answer-help-background,#mdhelp-tabs,.ad502-room,header,.topbar-dialog div.header  {
    background-color:#373737 !important;
}

.owner-revision td,.owner-revision .revision-comment,.owner-revision .user-details{
    background: #4A5287 !important;
}

.comment-user.owner {
    background:#2E5666 !important;
}

.comment-user {
    padding:2px !important;
}

.post-tag,#toc {
    background:#454545 !important;
    border:0px !important;
}

.welovestackoverflow,.topbar-dialog {
    border: 0px !important;
}

.mdhelp-tabs,#hireme {
    border: 1px solid #888 !important;
}

.top-tags .tag-wrapper .tag-container .col {
    border-right:2px solid #888 !important;
}

.module,#question-header,.question-summary,.subheader,#tabs > a,.tabs > a,.company-ad-b,div.subtabs a,.page-numbers,.topbar-dialog li,.comment td,.answer,.wmd-input,.wmd-button-bar,.wmd-preview,.grippie,.progress-bar div {
    border-color:#888 !important;
}

.topbar-dialog {
    background-color:#888 !important;
}

.post-signature.owner,.user-details,.tagged-interesting,#hireme {
    background:#353535 !important;
}

.comment:hover,.js-gps-track:hover,.siteSwitcher-dialog li:hover,.inBox-item:hover,header .topbar-icon-on,header .secondary-nav .-item .-link:hover {
    background:#555555 !important;
}

input {
    background:#E5E5E5 !important;  
    color:#404040 !important;
}

#hmenus a:hover {
    background:#606060 !important;
}

textarea {
    background:#404040 !important;
    color:#C0C0C0 !important;
}

.grippie {
    background:#454545 !important;
}

.Feed-icon {
    background-color: rgba(255,255,0) !important;
}

/* old logo */
#hlogo a {
    background-image: url("http://i.imgur.com/zeNdknx.png") !important;
    background-size: 280px;
    width:280px;
    height:90px;
}

/* new header logo */
.so-header .-logo .-img {
    background-image: url("https://i.imgur.com/lLtU6Nd.png") !important;
    background-size: 150px;
    width:150px;
    height:30px;
    background-position:0;
    margin-top:-4px;
    background-repeat:no-repeat;
}


.community-bulletin,.ad502-room {
    Box-shadow:none !important;
}

/* code colors */

.post-text {
    background:#282828 !important;
    color:#C0C0C0 !important;
}

.prettyprint,blockquote,pre,pre>.spaces,.hi,.badge-tag {
    background:#353535 !important;
}

code { 
    background:#353535 !important;
    color:#C0C0C0 !important;
}

.lit { /* literal */
    color:#FF6961 !important;
}

.tag { /* tag */
    color:#FF6961 !important;
}

.atn {
    color:#C23B22 !important;
}

.atv {
    color:#AEC6CF !important;
}

.str { /* string*/
    color:#C23B22 !important;
}

.pln { /* plain text */
    color:#E0E0E0 !important;
}

.pun { /* punctuation */
    color:#A0A0A0 !important;
}

.com { /* comment */
    color:#ACD372 !important;
}

.kwd { /* keyword */ 
    color:#AEC6CF !important;
}

.typ { /* type */
    color:#7EB1C4 !important;
}

.new-post-activity{
    background-color: inherit;
}

.snippet-code{
    border: none !important;
}

.snippet-holder{
    background: #2a2a2a !important;
}

.CodeMirror-scroll{
    background: #353535 !important;
}

.cm-def,.cm-atom,.cm-attribute,.cm-s-default{
    color: #6262ff !important;
}

.cm-s-default .cm-keyword{
    color: #9e1fb1 !important;
}

.cm-tag{
    color: #44833a !important;
}

.cm-string{
    color: #8d3535 !important;
}

.CodeMirror{
    color: #C0C0C0 !important;
    background: #353535 !important;
}

.CodeMirror-selected {
    background: blue !important; 
}
.CodeMirror-focused .CodeMirror-selected { 
    background: blue !important;  
}
.CodeMirror-scroll .CodeMirror-line::selection,.CodeMirror-scroll .CodeMirror-line>span::selection,.CodeMirror-scroll .CodeMirror-line>span>span::selection{
    background: blue !important;
}

.CodeMirror-gutters{
    background: #424242 !important;
}

#snpte-Box-edit-result{
    background: #7d7d7d !important;
}

.snippet-modal .-code .column.result .-name{
    color: #bebfbf !important;
}

.clc-cp-sb--short .-wrapper{
    background-color: #3d3d3d !important;
}

.clc-cp-sb--short .-bg-image:after{
    background-color: #484848 !important;
}

.clc-cp-container .clc-cp-tag{
    background: #454545 !important;
}

.clc-btn-secondary{
    background: #606060 !important;
}

.clc-cp-sb--tall{
    background-color: inherit !important;
    border: none !important;
}

.clc-cp-sb--tall .clc-cp-sb-learnmore-wrap{
    background-color: inherit !important;
}

#hireme{
    margin-bottom: 20px;   
}

.mainbar.reviewable-answer,.comment.js-comment {
    background-color: inherit !important;
}

#new-answer-activity,.new-post-activity{
    background-color: inherit;
}

.p-highlights .-card{
    background-color: inherit;  
    border: 1px solid #e4e6e8;
}

.p-highlights .-graph{
    background-image: url(https://data.zenoo.fr/stackoverflow_lines.svg)
}

aside.-badges>div:first-of-type>div{
    background-color: #202020;
    border-color: #646363;
}

解决方法

在codemirror.css中,从第321行您将看到:

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection,.CodeMirror-line > span::selection,.CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection,.CodeMirror-line > span::-moz-selection,.CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

>将这些规则复制到样式表中.>尝试用所有这些规则的自定义颜色替换background-color属性.>尝试添加!重要.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。