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>
问题补充：
第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>包裹。
最佳答案
0
code{
//针对code写样式
}
pre code{
//将上面的css覆盖掉
//pre code特有样式。
}
收获园豆：20
code的css定义比较多，在pre code中覆盖有些麻烦。
@dudu:
.cnblogs-markdown > code,
.cnblogs-markdown > p > code{ <!--写死结构，然后写css--> }
@幻天芒: 这个是正解，但不要求p的上层一定是.cnblogs-markdown，可以改为：
.cnblogs-markdown p > code{
}
@dudu: 这个就根据你自身的html结构来定了，呵呵~
其他回答(2)
1
p code {
background-color: red;
}
收获园豆：10
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: 应该是可以的，你再试试
@dudu: 我研究一番发现有个`!important`跟在后面可以强调最高优先级。不过乱用的话就有点乱了。
