побег из родительского класса css в html

Question

Я работаю с HTML-шаблоном, который имеет свой собственный CSS и довольно обширен. Он имеет более 2000 строк кода. Я хочу поместить вводный текст с помощью кнопки внутри формы, но эта форма имеет класс CSS, так как я не хочу изменять существующий класс CSS только для одной кнопки, есть ли способ поместить элемент HTML внутри формы с классом CSS, так что класс CSS не влияет на мой HTML-элемент? Существуют ли специальные HTML-теги, которые я мог бы использовать для размещения других элементов внутри элемента, которые не будут влиять на CSS родителя?

<form class="some-class"> 
    I want to put this elements inside the form but I don't want them to be affected by the form class: 
    <div class="input-group"> 
    <input type="text" class="form-control"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
    </span> 
    </div> 
</form> 

Answer 1

Вы можете либо присвоить элементу атрибут идентификатора, либо использовать имя класса, которое больше нигде не используется. Затем вы сможете установить стили CSS для этого идентификатора или имени класса, которые затронут только этот элемент.

Что касается родителя, классы CSS, связанные с элементами, не влияют на родительский элемент этого элемента. CSS-классы влияют только на элемент, к которому они применяются, и используются для выкапывания элементов внутри (каскадирования) этого элемента.

Answer 2

Редактирование текущего CSS, вы можете добавить правило not() в форму CSS, если у вас есть такие.

Например, если у вас:

form input { border: 2px solid red; } 

Тогда вы могли бы добавить свой класс с отрицанием, как в:

form:not(.some-class) input { border: 2px solid red; } 

MDN documentation имеет более подробную информацию о :not() и показывает совместимость (IE 9+, например.)

Другой способ - иметь положительный класс на всех для мс, за исключением тех немногих, которые вы не хотите, трансформируются:

<form class="form-xyz">...</form> 

form.form-xyz input { border: 2px solid red; } 

В большинстве случаев это работает лучше. Особенно со старыми браузерами. Кроме того, вы не должны указать ключевое слово form:

.form-xyz input { border: 2px solid red; } 

Но все это в основном зависит от существующих CSS.

Что касается вашего вопроса о специальных HTML-тегах в HTML, чтобы сделать такие вещи, мы фактически используем <div> для блоков и <span> для встроенного текста, чтобы предлагать специальные эффекты. Эти теги могут иметь класс, поэтому ваш CSS может использовать тот же трюк, что и форма выше. Но это означает, что вы инкапсулировать вещи внутри конкретных <div> и <span> теги:

<div class="form-xyz"> 
    <form> 
    ... 
    </form> 
</div> 

.form-xyz input { border: 2px solid red; } 

Как вы можете видеть, в этом случае последний CSS я представил еще раньше работает, как ожидалось!