csdn stylish 代码

对于csdn的格式调整目标：

• 去掉左侧作者信息栏
• 将正文显示区域变宽些
• 去广告去推荐是必须的

先看最终的效果：

image.png

简洁清爽

css中“.”和“#”表示什么？？
https://www.html.cn/qa/css3/14512.html

---

折腾了半天，还是欠缺基本的html知识，最后在stylish商店里找到一个简洁的实现，就看懂了...
其中最重要的是：mianbox 由 main和aside组成 main是文章 aside显示作者信息
最重要的代码：

/* mianbox 由 main和aside组成 main是文章 aside显示作者信息 */
#mainBox {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 4rem);
}

#mainBox > main {
    display: block!important;
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 75%;  /*     显示宽度 */

}

 /*     去除边栏 */
#mainBox > aside {
    position: unset!important;
    float: none;
    display: none!important;
}

完整代码

#csdn-toolbar,
/* .article-info-box, */
.hide-article-box,
.blog-expert-recommend-box,
.recommend-item-box.type_hot_word,
.recommend-ad-box,
.isGreatIcon,
.tool-box,
.meau-gotop-box,
.recommend-end-box {
    display: none!important;
}

body {
    min-width: unset;
}

#article_content {
    height: auto!important;
}

/* mianbox 由 main和aside组成 main是文章 aside显示作者信息 */
#mainBox {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 4rem);
}

#mainBox > main {
    display: block!important;
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 75%;  /*     显示宽度 */

}

#mainBox > aside {
    position: unset!important;
    float: none;
    display: none!important;
}

.pulllog-box {
    display: none!important;
}

.recommend-box {
    display: none!important;
    flex-wrap: wrap;
    background: white;
    padding-top: 3rem;
    position: relative;
}

.recommend-box::before {
    content: "相关文章";
    display: none!important;
    position: absolute;
    top: 1rem;
    font-size: 1.3rem;
    left: 1rem;
}

.recommend-item-box {
    width: 50%;
    max-width: 25rem;
}

.recommend-item-box::before {
    display: none;
}

.recommend-item-box .content,
.recommend-item-box h4 {
    width: 100%!important;
}

.blog_title_box.oneline {
    display: none;
}

最终效果：