2016-06-02 5 views
0

У меня есть небольшая проблема с css.Как удалить стиль css div внутри другого div?

У меня есть один с css, который генерируется кодом внутри другого. Я не могу изменить файл css.

И мне нужно удалить этот стиль. Возможно ли это как-то?

<div class="1"> 

    #Generated by code 
    <div class="2" style="xxxxxxxx"> 
     This text is bold now. Cause of the style. I need normal! 
    </div> 
    #Generated by code 

</div> 

Есть ли что-то, что я могу сделать?

Спасибо :)

+0

Вы можете добавлять пользовательские стили или внутренне или извне? Если это так, вы всегда можете переопределить правила встроенного стиля, объявив объявление объявления '! Important' окончанием вашего правила; например; '.1 .2 {font-weight: normal! Important;}' – UncaughtTypeError

ответ

0

Почему бы не использовать javascript?

<body onload="myFunction()"> 

    <div class="1"> 

     #Generated by code 
     <div class="2" style="xxxxxxxx"> 
      This text is bold now. Cause of the style. I need normal! 
     </div> 
     #Generated by code 

    </div> 

    <script> 

function MyFunction 
{ 
    document.getElementsByClassName("2").style.blabla; 
} 

    </script> 

Или даже использовать

<style> 
.2 
{ 
width:50px; 
} 
</style> 

?

0

Вы можете использовать !important для этого:

<div class="_1"> 
    #Generated by code 
    <div class="_2" style="font-weight: normal !important;"> 
     This text is bold now. Cause of the style. I need normal! 
    </div> 
    #Generated by code 
</div> 

или вы можете создать новый файл CSS включить его в шаблон. В вашем CSS вы положили что-то вроде:

._1 > ._2 { 
    font-weight: normal !important; 
} 

Обратите внимание, что идентификаторы не могут начинаться с цифр, так что вы должны положить письмо или подчеркивание к нему, что-то вроде _1 в CSS было бы ._1 { }. Читайте об этом на этом посту: Allowed characters for CSS identifiers

Согласно комментарию от @ Error404 ниже: !important Исключением не является необходимость в встроенных стилях. Как сказано в MDN, стили Inline, добавленные в элемент (например, style = "font-weight: bold"), всегда переписывают любые стили во внешних таблицах стилей и, следовательно, могут считаться обладающими самой высокой специфичностью.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception. Существует также ответ от @ Error404 более подробной информацией об этом (ниже или на вершине этого ответа)

Смотрите рабочую скрипку: https://jsfiddle.net/o24jww1b/1/

+0

Я не могу изменить второй div. Я могу изменить только первый. – user3509584

+0

'! Important exception' не требуется для встроенных стилей. Поскольку [MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types) говорит, что стили _Inline добавлены в элемент (например, style = "font-weight: bold") всегда переписывайте любые стили во внешних таблицах стилей и, следовательно, можно считать, что они имеют самую высокую специфичность. –

+0

Спасибо, я добавил ваш комментарий в свой ответ @ Error404 :-) – Jer

0

Вы можете создать еще один файл CSS и попытаться поставить выше specificity к стилям, применимым к вашему div. Если вы установили ID на ваш div и применили свои стили из новой таблицы стилей CSS, он имеет самый высокий specificity.

Постарайтесь избежать !important exception, если вы можете достичь этого, установив более высокую специфичность для ваших новых моделей CSS для этого div. Использование !important exception считается плохой практикой, как они выразились на веб-странице:

Использование важным является плохой практикой и следует избегать, поскольку это делает отладку более трудной, нарушая естественный каскадирование в ваших таблицах стилей!.

Проблема в том, что встроенные стили переопределяют все стили внешних таблиц стилей, поэтому вам, возможно, придется использовать !important exception здесь.

Встроенные стили добавляются к элементу (например, стиль = «начертание шрифта: жирный») всегда перезаписывает любые стили во внешних таблиц стилей, и, таким образом, можно рассматривать как имеющий самую высокую специфичность.

0

Использование JavaScript, как упоминалось ранее, является хорошим способом достижения желаемого поведения. Но согласно MDN

document.getElementsByClassName() 

возвращает массив, подобный структуре. Таким образом, правильный синтаксис будет

document.getElementsByClassName('2')[0].style.fontWeight = 'normal'; 

или полностью удалить использование свойства стиля

document.getElementsByClassName('2')[0].removeAttribute('style'); 
0

вы можете сделать это с помощью JQuery использования этого

<script> 
$(document).ready(function(){ 
     $("._2").css("font-size", "normal"); 
}); 
</script> 
Смежные вопросы