2017-02-04 11 views
0

У меня есть DIV в Foo.ascx так:Сделать изменение без использования! Важный модификатор - правило специфичности?

<div id="myIdentifier" class="myCssClass"> 

Он вложен в Serveral DPanels и т.д. Мне нужно установить высоту этого Div в 80px. Когда я добавляю height: 80px; в myCssClass, он не работает. Если я добавлю важный модификатор в эту строку кода, так что это height: 80px !important;, он действительно работает. Мне нужно (желательно) изменить высоту без важного модификатора или понять, почему это необходимо.

Единственные другие ссылки на myIdentifier (и, следовательно, на div) находятся в FooBehavior.js. Внутри FooBehavior.js единственное, что происходит, это добавление дочернего элемента и изменение ширины.

Любые идеи/мысли?

+4

Вам нужно включить все ваши CSS. У вас есть другой CSS на странице с более высокой спецификой. Мы не можем сказать вам, как иметь более высокую специфичность для свойства CSS, если мы не знаем других правил, которые должны быть выше. –

+1

Если вы щелкните правой кнопкой мыши элемент и выберите «проверить», откроются инструменты для разработки браузера. При выборе элемента будут отображаться правила CSS, которые применяются к нему, и вы сможете увидеть, какое правило имеет приоритет над вашим. Как только вы увидите это правило, вам придется поменять свое, чтобы оно было более конкретным. Но, не зная, что это за другое правило, мы действительно не можем сказать окончательно, каково ваше правило. –

+1

Используя инспектор стиля вашего браузера, посмотрите, какое правило переопределяет правило 'myCssClass'. Это скажет вам, что вам нужно сделать, чтобы ваше правило было более конкретным, чем это (или в равной степени конкретным, но определенным после него, так что оно имеет приоритет). Однако обратите внимание, что правила ID довольно специфичны, поэтому '# myIdentifier.myCssClass {height: 80px; } 'может быть достаточным. –

ответ

0

Вы можете использовать более сильное определение, например:

Прежде всего идентификатор класса, Второй является «ДИВ, который имеет класс myCssClass» Третий один является «ребенком DIV, который имеет класс myCssClass» И так далее ..

.myCssClass { 
 
    width: 550px; 
 
    height: 550px; 
 
    background-color: black; 
 
    } 
 

 
div .myCssClass { 
 
    background-color: blue; 
 
    } 
 

 
div > .myCssClass { 
 
    background-color: yellow; 
 
    }
<div id="parent"> 
 

 
    <div id="myIdentifier" class="myCssClass" /> 
 
    
 
</div>