элемент стиля html, за которым следует определенный класс

0

Я пытаюсь создать следующий элемент кода:

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

С этим стилем:

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

Но я хочу только стилизовать эти элементы кода, за которыми следует этот конкретный класс span. Я хочу, чтобы все остальные элементы кода остались нетронутыми. Можно ли это сделать, используя css, javascript или jquery?

Теги:

4 ответа

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 не требуется, если вам это нужно.

  • 0
    Этот работает отлично :)
  • 0
    Возможно ли это сделать, только если родительский элемент является элементом кода? Потому что это не всегда так в моем коде. Иногда родительский элемент - это <p> и я хочу оставить их полностью нетронутыми.
Показать ещё 2 комментария
1

Если вы должны создать code основанный на существовании дочернего элемента этого класса:

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

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

Хотя, если бы это было возможно, было бы намного проще стилизовать его с помощью простого CSS-селектора.

Рекомендации:

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');
0

Вы можете сделать это в CSS как это

code span.MathJax_Preview {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
}
  • 0
    +1 за мгновенный ответ
  • 2
    Я думаю, что OP нужно стилизовать только те родительские элементы CODE, которые имеют этот конкретный SPAN. в таком случае, как вы будете нацеливаться? Этот код будет предназначен только для диапазона внутри тега CODE, а не наоборот.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню