Как предотвратить наследование css

Ниже приведен пример кода кода, который я использую. У меня есть два набора css и вы хотите применить к двум компонентам UL. однако результат получается, внутренний "UL" будет содержать часть css, определенную для ее родителя. и даже некоторые из css, определенные в "b", будут отменены "a"... ночным кошмаром...

как я могу остановить наследование???

<ul class="moduleMenu-ul">
    /* for loop begin */
        <li class="moduleMenu-li">
                  <a></a>
        </li>
    /* for loop end */
     <li class="moduleMenu-li">
          <a>On Over the div below will be show</a>
          <div id="extraModuleMenuOptions">
                <ul class="flow-ul">
                 /*for loop begin*/
                    <li class="flow-li">
                          <a class="flow-a"></a>
                    </li>
                 /*for loop end*/
                </ul>
          </div>
     </li>
</ul

CSS

.moduleMenu-ul {
    width: 100%;
    height: 43px;
    background: #FFF url("../images/module-menu-bg.gif") top left repeat-x;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.moduleMenu-ul .moduleMenu-li {
    display: block;
    float: left;
    margin: 0 0 0 5px;
}

.moduleMenu-ul .moduleMenu-li a {
    height: 43px;
    color: #777;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 200%;
    padding: 8px 15px 0;
    text-transform:capitalize;
}

.moduleMenu-ul.moduleMenu-li a: hover {       цвет: # 333;   }

.moduleMenu-ul .moduleMenu-li a.current{
    color: #FFF;
    background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
}

#extraModuleMenuOptions {
    z-index:99999;
    visibility:hidden;
    position:absolute;
    color:#FFFFFF;
    background-color:#236FBD;
}

#extraModuleMenuOptions .flow-ul {
    text-align:left;
}

#extraModuleMenuOptions .flow-ul .flow-li {
    display:block;
}

#extraModuleMenuOptions .flow-ul .flow-li .flow-a {
    color:#FFFFFF;
}

Ответы

Ответ 1

скажет, что у вас есть это:

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
<ul>

Теперь, если вам не нужна совместимость с IE6 (ссылка Quirksmode), вы можете иметь следующий css

ul li { background:#fff; }
ul>li { background:#f0f; }

> является прямым дочерним оператором, поэтому в этом случае только первый уровень li будет фиолетовым.

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

Ответ 2

Если внутренний объект наследует свойства, которые вам не нужны, вы всегда можете настроить их на то, что вы хотите (т.е. - каскадные свойства, и поэтому их можно перезаписать на более низком уровне).

например.

.li-a {
    font-weight: bold;
    color: red;
}

.li-b {
    color: blue;
}

В этом случае "li-b" будет по-прежнему выделен полужирным шрифтом, даже если вы этого не хотите. Чтобы сделать это не жирным, вы можете:

.li-b {
    font-weight: normal;
    color: blue;
}

Ответ 3

Пока это недоступно, эта увлекательная статья обсуждает использование Shadow DOM, которая является техникой, используемой браузерами для ограничения как далеко каскадные таблицы стилей каскадом, так сказать. Он не предоставляет никаких API-интерфейсов, поскольку, по-видимому, нет текущих библиотек, способных обеспечить доступ к этой части DOM, но это стоит посмотреть. Есть ссылки на списки рассылки внизу статьи, если это вас интригует.

Ответ 4

Наследуемые элементы должны иметь установленные стили по умолчанию.
Если родительский класс устанавливает стиль color:white и font-weight:bold, то ни один унаследованный ребенок не должен устанавливать в своем классе "цвет: черный" и font-weight: normal. Если style не задано, элементы получают свой стиль от своих родителей.

Ответ 5

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

Возьмите пример ниже:

<div class="red"> <!-- ignore the semantics, it an example, yo! -->
    <p class="blue">
        Blue text blue text!
        <span class="notBlue">this shouldn't be blue</span>
    </p>
</div>
<div class="green">
    <p class="blue">
        Blue text!
        <span class="notBlue">blah</span>
    </p>
</div>

Невозможно заставить класс .notBlue вернуться к родительскому стилю. Лучшее, что вы можете сделать, это следующее:

.red, .red .notBlue {
    color: red;
}
.green, .green .notBlue {
    color: green;
}

Ответ 6

Использование подстановочного знака * selector в CSS для переопределения наследования для всех атрибутов элемента (путем их возврата в исходное состояние).

Пример использования:

li * {
   display: initial;
}

Ответ 7

Отменить значения, присутствующие во внешнем UL со значениями во внутреннем UL.

Ответ 8

вы можете загрузить новый контент в iframe, чтобы избежать наследования css.