样式html元素，后跟特定类

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，则不需要它。

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;
}