从mdnice复制的css格式不起作用

[petemeng]

从mdnice复制的css格式不起作用

[YangFong]

还需补充一些信息：

• 复现该问题的步骤
• 预期看到什么样的效果

[petemeng]

1. 步骤：
   点击样式-自定义CSS-删除默认的CSS-粘贴从mdnice复制的css格式。

2. 预期结果
   

谢谢~

以下是从mdnice复制的css格式，主题：重影。

/* 全局属性
 * 页边距 padding: 30px;
 * 英文换行 word-break: break-all;
 */
#nice {
}

/* 段落，下方未标注标签参数均同此处
 * 上边距 margin-top: 5px;
 * 下边距 margin-bottom: 5px;
 * 行高 line-height: 26px;
 * 词间距 word-spacing: 3px;
 * 字间距 letter-spacing: 3px;
 * 对齐 text-align: left;
 * 颜色 color: #3e3e3e;
 * 字体大小 font-size: 16px;
 * 首行缩进 text-indent: 2em;
 */
#nice p {
  font-size: 15px;
  padding: 5px;
  text-align: center;
}

/* 一级标题 */
#nice h1 {
}

/* 一级标题内容 */
#nice h1 .content {
}

/* 一级标题前缀 */
#nice h1 .prefix {
}

/* 一级标题后缀 */
#nice h1 .suffix {
}

/* 二级标题 */
#nice h2 {
  display: table;
  margin: 30px auto 20px auto;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgb(62, 62, 62);
}

/* 二级标题内容 */
#nice h2 .content {
  display:block;
  font-size: 18px;
  border: 1px solid black;
  padding: 10px;
  transform: translate3d(-5px, -5px, 0px);
}

/* 二级标题前缀 */
#nice h2 .prefix {
}

/* 二级标题后缀 */
#nice h2 .suffix {
}

/* 三级标题 */
#nice h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 三级标题内容 */
#nice h3 .content {
  font-size: 18px;
  text-shadow: rgb(171 224 225) 3.83022px 3.21394px 0px;
}

/* 三级标题前缀 */
#nice h3 .prefix {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://files.mdnice.com/pic/d1e2129b-30a8-443d-8ebb-a3f7aa09141e.png);
}

/* 三级标题后缀 */
#nice h3 .suffix {
}

/* 无序列表整体样式
 * list-style-type: square|circle|disc;
 */
#nice ul {
}

/* 有序列表整体样式
 * list-style-type: upper-roman|lower-greek|lower-alpha;
 */
#nice ol {
}

/* 列表内容，不要设置li
 */
#nice li section {
  font-size: 15px;
}

/* 一级引用
 * 左边缘颜色 border-left-color: black;
 * 背景色 background: gray;
 */
#nice .multiquote-1 {
}

/* 一级引用文字 */
#nice .multiquote-1 p {
  font-size: 15px;
}

/* 二级引用
 */
#nice .multiquote-2 {
}

/* 二级引用文字 */
#nice .multiquote-2 p {
  font-size: 15px;
}

/* 三级引用
 */
#nice .multiquote-3 {
}

/* 三级引用文字 */
#nice .multiquote-3 p {
  font-size: 15px;
}

/* 链接 
 * border-bottom: 1px solid #009688;
 */
#nice a {
  font-size: 15px;
}

/* 加粗 */
#nice strong {
  color: rgb(255, 79, 121);
}

/* 斜体 */
#nice em {
  font-size: 15px;
}

/* 加粗斜体 */
#nice em strong {
  font-size: 15px;
}

/* 删除线 */
#nice del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
#nice hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
#nice img {
}

/* 图片描述文字 */
#nice figcaption {
}

/* 行内代码 */
#nice p code, #nice li code {
}

/* 
 * 代码块不换行 display: -webkit-box !important;
 * 代码块换行 display: block;
 */
#nice pre code {
}

/*
 * 表格内的单元格
 * 字体大小 font-size: 16px;
 * 边框 border: 1px solid #ccc;
 * 内边距 padding: 5px 10px;
 */
#nice table tr th,
#nice table tr td {
}

/* 
 * 某一列表格列宽控制
 * n 可以修改为具体数字，不修改时表示所有列
 * 最小列宽 min-width: 85px;
 */
#nice table tr th:nth-of-type(n),
#nice table tr td:nth-of-type(n){
}

/* 脚注文字 */
#nice .footnote-word {
}

/* 脚注上标 */
#nice .footnote-ref {
}

/* "参考资料"四个字 
 * 内容 content: "参考资料";
 */
#nice .footnotes-sep:before {
}

/* 参考资料编号 */
#nice .footnote-num {
}

/* 参考资料文字 */
#nice .footnote-item p { 
}

/* 参考资料解释 */
#nice .footnote-item p em {
}

/* 行间公式
 * 最大宽度 max-width: 300% !important;
 */
#nice .block-equation svg {
}

/* 行内公式
 */
#nice .inline-equation svg { 
}

/* 容器块1 */
#nice .block-1 {
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgba(48, 117, 153, 0.34);
  margin: 0;
  padding: 0;
}

#nice .block-1 .block-1-inner {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgba(48, 117, 153, 0.34);
  transform: translate3d(-5px, -5px, 0px);
  padding: 15px;
}

#nice .block-1 .block-1-inner p {
  text-align: left;
}

/* 容器块2 */
#nice .block-2 {
}

/* 容器块3 */
#nice .block-3 {
}

/* 分列总体布局 */
#nice .column {
  
}

/* 分列左边布局 */
#nice .column .column-left {
}

/* 分列右边布局 */
#nice .column .column-right {
}

#nice .column .column-right p {
  text-align: left;
  font-size: 12px;
}

[YangFong]

根据你提供的信息得出的结果：这些设置是不会生效的。

为什么？因为在我们的项目中，最终渲染的标签几乎是没有类。H1、H2 这些都不存在 class。

而这段 CSS 中，所有的选择器前面都是 #nice，这是 mdnice 私有的一个类目，而当前项目中，没有一个可以对应上。

[petemeng]

好的，谢谢解答。

[YangFong]

如果说，就是想使用该怎么做呢，那就需要自己手动转换了，如：

/* 二级标题 */
#nice h2 {
  display: table;
  margin: 30px auto 20px auto;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgb(62, 62, 62);
}

修改成：

/* 二级标题 */
-#nice h2 {
h2 {
  display: table;
  margin: 30px auto 20px auto;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgb(62, 62, 62);
}

测试效果：

---

我没法说能够完全兼容，在测试时也发现，在「自定义 CSS」写伪元素样式好像不会生效。

[YangFong]

如果说，就是想使用该怎么做呢，那就需要自己手动转换了，如：

/* 二级标题 */
#nice h2 {
  display: table;
  margin: 30px auto 20px auto;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgb(62, 62, 62);
}

修改成：

/* 二级标题 */
-#nice h2 {
h2 {
  display: table;
  margin: 30px auto 20px auto;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
  border-color: rgb(62, 62, 62);
}

测试效果：

---

我没法说能够完全兼容，在测试时也发现，在「自定义 CSS」写伪元素样式好像不会生效。

[petemeng]

好的，我再研究一下。谢谢你啦。