代码之家 › 专栏 › 技术社区 › Zenoo

自定义SO的代码段选择背景

code-snippets selection css

Zenoo · 技术社区 · 7 年前

我目前正试图创造一个黑暗的主题与时尚。在我不得不定制代码片段之前,一切都很顺利。除了预定义的颜色外,我似乎无法将选择颜色更改为任何其他颜色:

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

我试着添加这个,但什么都没有改变:

.CodeMirror-line::selection,.CodeMirror-line>span::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, .welovestackoverflow, .comment-user, .community-bulletin, .revision td, #nav-askquestion, .answer-votes, #tabs a, .tabs a, .nav.mainnavs li, .question-status, #newsletter-ad .company-ad-b, .company-ad-sb, #hero-content, .module.newuser, .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, .company-ad-sb, #hero-content, div.subtabs a, .page-numbers, .topbar-dialog li, .user-about-me, .user-show-new .user-header-slim .data, .comment td, .answer, .wmd-input, .wmd-button-bar, .wmd-preview, .grippie, .ad502-room, .card, .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, 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;
}

4 回复 | 直到 7 年前

sol 7 年前

在里面 codemirror.css

.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; }

将这些规则复制到StyleSheet中。
尝试更换 background-color 属性和所有这些规则的自定义颜色。
尝试添加 !important .

vals 6 年前

.CodeMirror-selected {
    background: red;
}

.CodeMirror-focused .CodeMirror-selected {
    background: red
}

Zenoo 6 年前

多亏了@vals,我注意到了

.CodeMirror-selected {
    background: red;
}

.CodeMirror-focused .CodeMirror-selected {
    background: red
}

我自己工作,但不是在我的时尚主题,我终于明白为什么:

规则

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

正在覆盖我们试图放置在选定内容上的任何背景。所以我添加了一个补丁,更精确地定位代码段行:

pre.CodeMirror-line{
  background: inherit !important;  
}

现在@VAL解决方案正在工作:)

谢谢大家帮我解决这个问题!

-1

Gurmatpal 6 年前

::-moz-selection { /* Code for Firefox */
   background:#d7d4f0;
}

::selection {
    background:#d7d4f0;
}

使用此代码可以解决您的问题