wie zu verhindern css erben

Question

Im Folgenden sind die Beispiel-Code-Block ich benutze. Ich habe zwei Sätze von CSS, und möchte auf zwei UL-Komponente anwenden. aber das Ergebnis herauskommen, die innere "UL" wird einige der CSS halten, die für seine Eltern definiert. und sogar einige der in "b" definierten css werden überschrieben durch "a" ... albtraum ...

wie kann ich die vererbung stoppen ???

<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 { color: # 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

überschreibt die aktuellen Werte in dem äußeren UL mit Werten im inneren UL.

Answer 2

Wenn das innere Objekt Eigenschaften erbt, die Sie nicht möchten, können Sie sie immer so setzen, wie Sie wollen (dh - die Eigenschaften sind kaskadierend und können daher auf der unteren Ebene überschrieben werden).

z.B.

In diesem Fall wird "li-b" immer noch fett dargestellt, auch wenn Sie es nicht möchten. Damit es nicht fett können Sie tun:

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

Answer 3

können sagen, Sie haben diese:

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

Nun, wenn Sie nicht brauchen, IE6 Kompatibilität (Referenz bei Quirksmode) Sie folgende CSS haben

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

Die > ist eine direkte Kinder-Operator, so dass in diesem Fall nur die erste Ebene von li s lila wird.

this helps

Answer 4

Die kurze Geschichte ist, dass es nicht möglich ist, zu tun, was Sie hier wollen. Es gibt keine CSS-Regel, die "eine andere Regel ignorieren" soll. Der einzige Weg ist es, eine spezifischere CSS-Regel für die inneren Elemente zu schreiben, die sie wieder wie vorher aussehen lässt, was ein Ärgernis ist.

das folgende Beispiel nehmen:

<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> 

gibt es keine Möglichkeit die .notBlue Klasse zu machen, um die Eltern Styling zurück. Das Beste, was Sie tun können, ist dies:

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

Answer 5

die Wildcard-* selector in CSS verwendet Vererbung für alle Attribute eines Elements außer Kraft zu setzen (durch diesen wieder in ihren Ausgangszustand setzen).

Ein Beispiel für seine Verwendung:

li * { 
    display: initial; 
} 

Answer 6

Sie den neuen Inhalt in einem Iframe laden kann CSS-Vererbung zu vermeiden.

Answer 7

Während dies derzeit nicht verfügbar ist, diskutiert this fascinating article die Verwendung des Shadow DOM, eine Technik, die von Browsern verwendet wird, um zu begrenzen, wie weit Cascading Style Sheets sozusagen kaskadieren. Er stellt keine APIs zur Verfügung, da es anscheinend keine aktuellen Bibliotheken gibt, die Zugriff auf diesen Teil des DOM bieten können, aber es lohnt sich. Es gibt Links zu Mailing-Listen am Ende des Artikels, wenn dich das fasziniert.

Answer 8

Für nicht vererbte Elemente müssen Standardstile festgelegt sein.
Wenn die übergeordnete Klasse color:white und font-weight:bold style festgelegt hat, dann muss kein geerbtes Kind 'color: black' und font-weight: normal in ihrer Klasse festlegen. Wenn style nicht festgelegt ist, erhalten Elemente ihren Stil von ihren Eltern.