样式 HTML 元素，后跟特定类

style html element followed by specific class

本文关键字：HTML 元素 样式      更新时间：2023-09-26

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

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

使用此样式：

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

但我只想设置此特定 span 类后跟的代码元素的样式。我想让所有其他代码元素保持不变。是否可以通过使用css，javascript或jquery来做到这一点？

使用 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不是必需的。

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

.hasMathJaxPreview {
    font: inherit;
    font-size: 100%;
    background: inherit;
    border: inherit;
}
$('span.MathJax_Preview').parent('code').addClass('hasMathJaxPreview');

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

引用：

  • addClass() .
  • parent() .
你可以

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

你可以像这样用CSS做到这一点

code span.MathJax_Preview {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
}
相关文章：