0

我尝试设置以下代码元素的样式：

<code>
<span class="MathJax_Preview"></span>
...
</code>

使用这种风格：

code {font: inherit; font-size: 100%; background: inherit; border: inherit;}

但我只想设置这个特定跨度类后面的那些代码元素。我想让所有其他代码元素保持不变。是否可以通过使用 css、javascript 或 jquery 来做到这一点？

4

4 回答 4

1

如果您必须code根据该类的子项的存在来设置样式：

.hasMathJaxPreview {
    font: inherit;
    font-size: 100%;
    background: inherit;
    border: inherit;
}

$('span.MathJax_Preview').parent('code').addClass('hasMathJaxPreview');

但是，如果可能的话，使用普通的 CSS 选择器来设置孩子的样式会简单得多。

参考：

于 2013-09-24T09:08:21.570 回答
1

使用 CSS，不可能基于子元素访问父元素。

在 Javascript 中，您可以这样做：

<script type="text/javascript">
  var spans = document.getElementsByClassName('MathJax_Preview');
  for(var i = 0; i < spans.length; i++) {
    if (spans[i].parentNode.tagName == "code") {
      spans[i].parentNode.setAttribute("style", "your style here");
    }
  }
</script>

请注意，如果您只需要它，则不需要 jQuery。

于 2013-09-24T09:08:49.503 回答
1

您可以使用 Jquery 来完成

$('span.MathJax_Preview').parents('code').css({
    'font': 'inherit',
    'font-size' : '100%', 
    'background': 'inherit', 
    'border': 'inherit'
});

或者您可以使用 CSS 和 Jquery 来完成

在 css 中你可以给这个样式

.myStyle{
    font: inherit; 
    font-size: 100%; 
    background: inherit; 
    border: inherit;
}

在 jquery 中，您可以将此类分配给您的 HTML 元素

$('span.MathJax_Preview').parents('code').addClass('myStyle');
于 2013-09-24T09:16:42.203 回答
0

你可以这样CSS做

code span.MathJax_Preview {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
}
于 2013-09-24T09:06:42.867 回答