Jak zapobiec dziedziczeniu css

Question

Poniżej przykładowy blok kodu, którego używam. Mam dwa zestawy css i chcę zastosować na dwóch składnik UL. jednak wynik wyjdzie, wewnętrzne "UL" będzie zawierać niektóre z css, które zdefiniowane dla rodzica. i nawet niektóre z css zdefiniowanych w "b" zostaną zastąpione przez "a" ... koszmar ...

Jak mogę zatrzymać spadek ???

<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: aktywowania { kolor: 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; 
} 

Answer 1

zastąpić wartości obecny w zewnętrznej UL o wartościach w wewnętrznej ul.

Answer 2

Jeśli obiekt wewnętrzny dziedziczy właściwości, których nie chcesz, możesz zawsze ustawić je według potrzeb (tzn. - właściwości są kaskadowe, a więc można je zastąpić na niższym poziomie).

np.

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

.li-b { 
    color: blue; 
} 

W tym przypadku "li-b" nadal będzie odważne, nawet jeśli nie chcesz tego. Aby nie śmiały można zrobić:

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

Answer 3

powiedzmy masz to:

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

Teraz, jeśli nie potrzebują kompatybilność IE6 (referencyjna Quirksmode) można mieć następujące css

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

> to bezpośredni operator dziecięcy, więc w tym przypadku tylko pierwszy poziom li s będzie fioletowy.

Nadzieja to pomaga

Answer 4

Krótka historia jest taka, że ​​to nie jest możliwe, aby robić to, co chcesz tutaj. Nie ma reguły CSS, która "ignoruje inną regułę". Jedynym sposobem jest napisanie bardziej szczegółowej reguły CSS dla wewnętrznych elementów, która powróci do tego, jak było wcześniej, co jest bólem w tyłku.

Weźmy przykład poniżej:

<div class="red"> <!-- ignore the semantics, it's 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> 

Nie ma sposobu, aby klasa .notBlue powrócić do stylizacji macierzystej. Najlepsze co możesz zrobić to:

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

Answer 5

Używanie wieloznaczny * selector w CSS, aby zastąpić dziedziczenie wszystkich atrybutów elementu (poprzez ustawienie ich z powrotem do stanu początkowego).

Przykładem jego zastosowania:

li * { 
    display: initial; 
} 

Answer 6

można załadować nowe treści w iframe, aby uniknąć css dziedziczenia.

Answer 7

Podczas gdy nie jest to obecnie dostępne, this fascinating article omawia użycie DOMu Cieni, który jest techniką używaną przez przeglądarki do ograniczania kaskadowania kaskadowego arkusza stylów. Nie udostępnia żadnych interfejsów API, ponieważ wydaje się, że nie ma obecnie bibliotek umożliwiających dostęp do tej części DOM, ale warto się jej przyjrzeć. Istnieją linki do list adresowych na dole artykułu, jeśli to Cię intryguje.

Answer 8

Nie dziedziczone elementy muszą mieć ustawione style domyślne.
Jeśli klasa nadrzędna jest ustawiona na style color:white i font-weight:bold, wówczas żadne odziedziczone potomstwo nie musi ustawiać "color: black" i font-weight: normal w swojej klasie. Jeśli ustawienie style nie jest ustawione, elementy otrzymują swój styl od swoich rodziców.