CSS специфичность / проблема наследования

Question

Я присоединяю сторонний компонент к элементу div (контейнеру). Этот элемент div находится внутри элемента from, а форма имеет класс cssform. мой основной лист CSS, который я использую, содержит определение:

.cssform div {
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px;
}

Мой контейнер теперь подвержен влиянию этого CSS, что делает сторонний компонент визуально непригодным для использования.

Как я могу "перезаписать" или "сбросить это выше css, чтобы оно не применялось ни в каких дочерних элементах моего контейнера, особенно с учетом того, что сам сторонний компонент создает элементы div ниже моего, также затронутые этими формами css

EDIT:

Структура:

<form class="cssform">
  <section>
    <div>
      <label></label><input>            
    </div>
    <div id="container"></div>         
    <div>
      <label></label><input>            
    </div>  
  <section>
</form>

Я исправил это, просто дав всем div-элементам, кроме контейнера, дополнительный класс css и используя его для назначения стиля форм. таким образом, мой контейнер не затронут. Я не добавляю это как ответ, потому что это технический ответ не на мой вопрос, а обходной путь.

Answer 1

Если вы пытаетесь стилизовать только один конкретный div, решение зависит от того, какая именно у вас структура HTML. Например, если форма выглядит как

<form class="cssform">
  <section>
    <div>
      <div> this one!
        <div> but not this one! </div>
      </div>
      <div> nor this one! </div>
    <div>
  <section>
</form>

, тогда CSS должен выглядеть следующим образом:

.cssform > section > div > div:first-child {...}

Надеюсь, это поможет.

Answer 2

Если ваш элемент div, скажем, третий дочерний элемент его родительского контейнера, вы можете использовать псевдокласс :not с :nth-child(3):

.cssform div:not(:nth-child(3)) {
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px;
}

Возможно, вам придется изменитьселектор в зависимости от всего вашего блока кода. Но я считаю, что селектор CSS, который вы ищете, это :not(:nth-child(n)).