css-vererbung verhindern

Question

Unten sind die Beispiel-Code-Block ich verwenden. Ich habe zwei Satz von css, und wollen auf zwei UL-Komponente anwenden. jedoch das Ergebnis herauskommen, die innere "UL" wird einige der css, die für seine Eltern definiert halten. und sogar einige der css definiert in "b" wird durch "a" überschrieben werden... Alptraum...

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

Nehmen wir an, Sie haben dies:

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

Wenn Sie die IE6-Kompatibilität NICHT benötigen (Referenz unter Quirksmode ) können Sie das folgende Css verwenden

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

El > ist ein direkter Kinderoperator, so dass in diesem Fall nur die erste Ebene von li s wird lila sein.

Ich hoffe, das hilft

Answer 2

Wenn das innere Objekt Eigenschaften erbt, die Sie nicht wünschen, können Sie diese jederzeit auf die gewünschten Eigenschaften setzen (d. h. die Eigenschaften sind kaskadierend, und Sie können sie auf der unteren Ebene überschreiben).

z.B..

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

.li-b {
    color: blue;
}

In diesem Fall wird "li-b" immer noch fett dargestellt, auch wenn Sie das nicht wollen. Um es nicht fett zu machen, können Sie Folgendes tun:

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

Answer 3

Dies ist zwar derzeit nicht verfügbar, dieser faszinierende Artikel erörtert die Verwendung des Shadow DOM, einer Technik, die von Browsern verwendet wird, um die Kaskadierung von Stylesheets sozusagen zu begrenzen. Er stellt keine APIs zur Verfügung, da es anscheinend keine aktuellen Bibliotheken gibt, die den Zugriff auf diesen Teil des DOM ermöglichen, aber es ist einen Blick wert. Am Ende des Artikels finden Sie Links zu Mailinglisten, falls Sie sich für dieses Thema interessieren.

Answer 4

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

Answer 5

Kurz gesagt, es ist nicht möglich, das zu tun, was Sie hier wollen. Es gibt keine CSS-Regel, die "eine andere Regel zu ignorieren" ist. Die einzige Möglichkeit, dies zu umgehen, besteht darin, eine spezifischere CSS-Regel für die inneren Elemente zu schreiben, die das Ganze wieder auf den vorherigen Zustand zurücksetzt, was sehr mühsam ist.

Nehmen Sie das folgende Beispiel:

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

Es gibt keine Möglichkeit, die .notBlue Klasse auf das übergeordnete Styling zurückgreifen. Das Beste, was Sie tun können, ist dies:

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