首页 新闻 赞助 找找看

css样式作用范围问题

0
悬赏园豆:30 [已解决问题] 解决于 2015-05-15 11:17

想定义一个样式,只对下面的<code>生效:

<div class="cnblogs-markdown">
    <p>行内代码测试 
        <code>var s='hello world';</code>,效果如何?
    </p>
</div>

不对下面的<code>生效:

<div class="cnblogs-markdown">
    <pre class="csharp">
        <code class="hljs cs">
            var s='hello world';
        </code>
    </pre>
</div>
css
问题补充:

第2段html代码也可能出现<p>,比如:

<div class="cnblogs-markdown">
    <p>
        <pre class="csharp">
            <code class="hljs cs">
                var s='hello world';
            </code>
        </pre>
    </P>
</div>

样式针对的<code>的区别是:一个没有被<pre>包裹,一个被<pre>包裹。

dudu的主页 dudu | 高人七级 | 园豆:31075
提问于:2015-05-15 10:16
< >
分享
最佳答案
0

code{

  //针对code写样式

}

pre code{

  //将上面的css覆盖掉

  //pre code特有样式。

}

收获园豆:20
幻天芒 | 高人七级 |园豆:37175 | 2015-05-15 10:54

code的css定义比较多,在pre code中覆盖有些麻烦。

dudu | 园豆:31075 (高人七级) | 2015-05-15 11:00

@dudu: 

.cnblogs-markdown > code,
.cnblogs-markdown > p > code
{ <!--写死结构,然后写css--> }
幻天芒 | 园豆:37175 (高人七级) | 2015-05-15 11:11

@幻天芒: 这个是正解,但不要求p的上层一定是.cnblogs-markdown,可以改为:

.cnblogs-markdown p > code{
}
dudu | 园豆:31075 (高人七级) | 2015-05-15 11:16

@dudu: 这个就根据你自身的html结构来定了,呵呵~

幻天芒 | 园豆:37175 (高人七级) | 2015-05-15 11:21
其他回答(2)
1

p code {
background-color: red;
}

收获园豆:10
爆发吧!胸大肌! | 园豆:127 (初学一级) | 2015-05-15 10:25
0

博客园里面用的代码区段,也就是符号 `,修改了css之后部分元素使用的仍然是blog-common.css中的。

```

.cnblogs-markdown code, .cnblogs-post-body code {
    font-family: "Courier New",sans-serif !important;
    font-size: 12px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
}

```

xcw0754 | 园豆:202 (菜鸟二级) | 2018-02-07 22:05

请问有办法解决么?比如背景颜色就是不行。

支持(0) 反对(0) xcw0754 | 园豆:202 (菜鸟二级) | 2018-02-07 22:06

@xcw0754: 应该是可以的,你再试试

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2018-02-08 17:24

@dudu: 我研究一番发现有个`!important`跟在后面可以强调最高优先级。不过乱用的话就有点乱了。

支持(0) 反对(0) xcw0754 | 园豆:202 (菜鸟二级) | 2018-02-08 17:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册