Question

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

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

这种风格：

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

但我想只设置这个特定span类所遵循的代码元素的样式。我想让所有其他代码元素不受影响。是否可以通过使用css，javascript或jquery来实现？

Answer 1

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

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

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

但是，如果可能的话，用简单的CSS选择器设置子的样式要简单得多。

参考文献：

addClass()。
parent()。

Answer 2

使用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，则不需要jQuery。

Answer 3

您可以使用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');

Answer 4

您可以在 CSS 中执行此操作

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

样式html元素后跟特定的类

4 个答案: