Как применить CSS правила после определенного тега - PullRequest
Новая
       7

Как применить CSS правила после определенного тега

1 голос
/ 21 апреля 2020

Как гласит заголовок, у меня есть следующий HTML, который выглядит следующим образом: 

<div id="content">
  <main>
    <h2 > Example Title</h2>
    <p>Hello World</p>

    <table class="table table-striped table-responsive-md btn-table">
      <tr>
        <td>Example 1 </td>
        <td>Example 2</td>
      </tr>
    </table>    
  </main>
</div>

После заголовка примера <h2> я хотел бы применить правило CSS: margin-top:20px;, margin-bottom:20px, ко всем другим тегам <p>, <table>.

Как мне это сделать?

Ответы [ 5 ]

1 голос
/ 22 апреля 2020

Поскольку вопрос также имеет тег Javascript, здесь это решение Javascript.

Давайте еще раз увидим ваш HTML. onload мы вызываем функцию applyStyleChanges(): 


  <body onload="applyStyleChanges()">
    <div id="content">
      <main>
        <p>Unaffected</p>
        <!-- ... -->
        <h2 > Example Title</h2>
        <p>Hello World</p>

        <table class="table table-striped table-responsive-md btn-table">
          <tr>
            <td>Example 1 </td>
            <td>Example 2</td>
          </tr>
        </table>
      </main>
    </div>
  </body>

Функцию applyStyleChanges() можно определить, как показано ниже: 

<script>
  function applyStyleChanges()
  {
    var node = document.getElementsByTagName("h2")[0];

    while(node = node.nextSibling)
    {
      if(node.nodeType == 1)
      {
        node.style.marginTop    = "20px";
        node.style.marginBottom = "20px";
      }
    }
  };
</script>

Пояснение

  1. Мы получаем «Границу» элемент. В этом случае это первый h2
  2. Мы oop на node.nextSibling, пока не будет достигнут конец списка братьев и сестер
  3. Для каждого брата мы выбираем только те, которые имеют тип " 1 "( узлы элементов )
  4. Для каждого выбранного элемента мы применяем желаемый набор node.style назначений
  5. Все братья и сестры до нашей " границы "* Элемент 1031 * не затронут
  6. Обратите внимание, как к свойствам margin-top и margin-bottom обращаются через marginTop и marginBottom соответственно. В JS свойства da sh удалены и верблюжий случай используется обозначение
1 голос
/ 21 апреля 2020

Вы можете создать класс и добавить его ко всем элементам после h2. Например: 

.example{
   margin-top: 20px;
   margin-botton:20px;
}

ИЛИ

вы можете указать margin-top: 20px и margin-botton: 20px для всех элементов и исключить h2, присвоив ему id. Например: 

#example{
   margin: 0;
}
1 голос
/ 21 апреля 2020

Есть (по крайней мере) два способа сделать это без изменения HTML.

Первый способ заключается в том, чтобы сказать: «Дайте мне всех детей main, которые не h2.

Другой путь, вдохновленный комментарием chriskirknielsen , это использовать общий комбинатор братьев и сестер и получить всех братьев и сестер h2.

Конечно, оба они предполагают, что это «все элементы на одном уровне», что вы хочу, а не «все элементы на одном уровне после указанной c точки в DOM», потому что последнее просто невозможно. 

main > *:not(h2) {
  margin-top:20px;
  margin-bottom:20px;
  border-top: 1px solid red;
}

/* OR */

h2 ~ * {
  margin-top:20px;
  margin-bottom:20px;
  border-bottom: 1px solid green;
}
<div id="content">
  <main>
    <h2 > Example Title</h2>
    <p>Hello World</p>

    <table class="table table-striped table-responsive-md btn-table">
      <tr>
        <td>Example 1 </td>
        <td>Example 2</td>
      </tr>
    </table>    
  </main>
</div>
0 голосов
/ 21 апреля 2020

Используйте селектор :not() 

main:not(h2) {marginstuff}

, он исключит h2, но будет применяться ко всему остальному в main

https://developer.mozilla.org/en-US/docs/Web/CSS/: не

0 голосов
/ 21 апреля 2020

Вы можете просто 

p{
margin-top: 20px;
margin-botton:20px;
}

ИЛИ

Вы можете присвоить имена классов тегам, например: - <p class='someClass'> и в css выбрать этот конкретный тег с помощью 

.someClass{
margin-top: 20px;
margin-botton:20px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...