CSS - Einfaches Spezifitätsproblem - '# div-id ul' - wird Listenstil von 'ul' nicht überschreiben

Dies ist eine sehr einfache Frage der CSS-Spezifität, aber ich kann es irgendwie nicht herausfinden.CSS - Einfaches Spezifitätsproblem - '# div-id ul' - wird Listenstil von 'ul' nicht überschreiben

In meinem Sheet, ich habe eine einfache Regel, die die Liste Stil aus den Listen entfernt:

ul { list-style: none; }

Dann für einige Listen, ich möchte eine Liste Stil angeben, aber egal was, Es wird nur die obige Regel nicht überschreiben?

#product ul { list-style: bullet !important; }

Das Problem ist, dass die UL wird oft in eine WYSIWYG-Box in einem CMS eingegeben wird, und ich will nicht, um den Benutzer zu zwingen, in HTML zu schreiben, zu haben und den UL eine spezifische ID geben, so dass wir am Ende wird oft mit Code wie:

<div id="product"> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    </ul> 
</div>

ich bin ein wenig überrascht, dass das einfach nicht funktioniert, gibt es keine Möglichkeit, diese andere zu beheben als mit Hilfe von Javascript $ (‚# Produkt ul‘) zu ergeben eine bestimmte Klasse oder CSS-Stil?

JSBIN: http://jsbin.com/ohuzuz/4

EDIT: Oops, sorry, ich hatte:

<div id="#product">

ein temporärer Fehler, die in der jsbin war, aber nicht mein ursprünglicher Code. Mein Fehler, aber das Problem war in der Tat die ungültige

list-style: disc

Quelle

2012-04-13 waffl

bullet ist kein gültiger List-Style-Type-Wert.

Auch, wenn das nicht das Problem ist, überprüfen Sie, ob Sie li nicht überall gestylt haben. Stile für li Elemente überschreiben diejenigen für ul Elemente, unabhängig von der Spezifität.

Quelle

2012-04-13 16:02:45

Herr Lister nagelt es. Die [möglichen 'List-Style-Typen' sind Disc, Circle, Square, Decimal usw., aber kein" bullet "] (https: //developer.mozilla.org/de/CSS/list-style-type) – steveax

Oh Gott, tut mir leid. Ich bin viel zu müde. Dies war definitiv das Problem, der ungültige List-Style-Typ. Vielen Dank! – waffl

Aber diejenigen, die sich über 'id =" # product "beschweren, haben auch Recht! –

ich für so etwas gehen würde,

ul { list-style:none; } 
#product ul {list-style:disc inside none; }

Quelle

2012-04-13 16:00:19 Udders

Ihre ID

Änderung falsch ist:

id="#product"

zu :

id="product"

Quelle

2012-04-13 16:01:02

Sieht aus wie Sie ein zusätzliches Zeichen in Ihrem HTML haben

<div id="#product">

die # entfernen und es sollte funktionieren.

Quelle

2012-04-13 16:02:09

Hier ist der richtige Code. Sie haben falsche ID # Produkt sollte Produkt in Ihrem div sein.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    ul { list-style: none; } 

    #product ul, #product ul li { list-style: disc; } 

</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
    <div id="product"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
    </div> 
</body> 
</html>

Quelle

2012-04-13 16:02:44

CSS - Einfaches Spezifitätsproblem - '# div-id ul' - wird Listenstil von 'ul' nicht überschreiben

Antwort

Verwandte Themen