Я пытаюсь создать следующий элемент кода:
<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-селектора.
Рекомендации:
Вы можете сделать это с помощью 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;
}
<p>
и я хочу оставить их полностью нетронутыми.