Несколько объявлений CSS для одного и того же тега

Question

У меня есть CSS-стиль, определенный в файле .js для тега <li> на странице. Я пытаюсь изменить html-страницу без изменения существующих файлов css и js и макета страницы. Я хочу, чтобы вставить следующий код:

<div style="float: left; width: 18%; bottom: 6.4%; border-right-style: groove; border-right-width:2px; border-top-style: groove; border-top-width:2px; border-bottom-style: groove; border-bottom-width: 2px; padding-right: 0%; padding-top: 0%; margin-right: 0%; margin-top: 0%; position: fixed;"> 
    <ul class="MenuBarVertical"> 
     <li>Text 1</li> 
     <li>Text 2</li> 
    </ul> 
</div> 

Но каждый <li> тег на странице HTML автоматически выбирает стиль из существующего файла CSS. Я не хочу этого для некоторых тегов <li>. Я хочу другой css для тегов <li>. Возможно ли, что я заключу теги <li> под тегом <div> и добавьте класс в тег div и определим для него специальный CSS, который может переопределить существующий css для каждого тега <li>? Я могу переопределить существующий CSS, определив стиль в теге <li>, например <li style="...">. Он отлично работает, но я должен добавить стиль в каждый тег <li>. Я хочу знать, добавляю ли я id или класс в родительский тег и пишу css для него где-то на самой странице, чтобы переопределить существующий стиль из .css-файла. Какой будет код? Как объявить такие css в разделе? или я должен объявить в теле?

Я надеюсь, что смогу объяснить свою проблему. Я хочу знать возможные способы переопределения стиля CSS для тега.

Answer 1

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

div ul.MenuBarVertical li {...} 

Даже лучше, если вы можете поместить идентификатор в DIV или мкл элементов (если у вас есть один такой элемент на странице). Если ничего не работает, вы можете использовать параметр !important, но это настоятельно не рекомендуется.

Answer 2

Есть несколько возможных решений:

1) использовать классы для определения свойств, которые вы хотите. например

<ul class="MenuBarVertical"> 
    <li class="other">Text 1</li> 
    <li class="other">Text 2</li> 
</ul> 

, а затем объявить стили, которые вы хотите иметь на этих li с. Объявите его соответствующим образом в своем файле css или вставьте в него нормальный блок для этого класса с помощью javascript, вы можете создать блок стиля «на лету» и добавить его в голову или использовать существующий и добавить это правило.

2) Включите блок встроенного стиля:

<ul class="MenuBarVertical"> 
<style scoped> 
    .MenuBarVertical li{ 
     /*declarations here*/ 
    } 
</style> 
    <li>Text 1</li> 
    <li>Text 2</li> 
</ul> 

scoped attribute является rather new и не распознается другими браузерами, чем Firefox и хром, поэтому я добавил .MenuBarVertical часть для дальнейшего указать li s вы хотите стиль (increase specificity), и он все равно будет работать. Как только scoped распознается во всех браузерах, вы можете отказаться от этого и просто написать li{...}.

Пожалуйста не:

а) использовать встроенные стили - плохо, всегда стараюсь, чтобы избежать этого!

b) использовать !important - еще хуже, не делайте этого!