CSS - 単純な特異性の問題 - '＃div-id ul' - 'ul'のリストスタイルをオーバーライドしません。

これはCSSの特異性の非常に単純な問題ですが、何とかそれを理解できません。私のスタイルシートでCSS - 単純な特異性の問題 - '＃div-id ul' - 'ul'のリストスタイルをオーバーライドしません。

は、私はリストからリストスタイルを削除する単純なルールがあります。そして、

ul { list-style: none; }

を、いくつかのリストのために、私はどんなリストスタイルを指定したいんだろうが、上記のルールをオーバーライドしないだけですか？

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

問題は、ULは、多くの場合、CMSでのWYSIWYGボックスに入力されますと、私はHTMLで記述し、ULに特定のIDを与えるために持っているユーザーを強制的にしたくないということですので、我々多くの場合のようなコードで終わるだろう：私は、これは単に動作していない少し驚いている

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

、$（「＃製品のUL」）を与えるためにJavaScriptを使用するよりも、この他を改善する方法はありません特定のクラスまたはCSSスタイル？

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

EDIT：おっと、申し訳ありませんが、私が持っていた：

<div id="#product">

jsbinにあった一時的な間違いはなく、私の元のコード。私のミスは、しかし、問題は、無効な

list-style: disc

出典

2012-04-13 waffl

bulletは、有効なリストスタイルタイプの値ではありません。

また、それが問題でない場合は、liがどこにでも配置されていないかどうかを確認してください。 li要素のスタイルは、特殊性にかかわらず、ul要素のスタイルをオーバーライドします。

出典

2012-04-13 16:02:45

Mr Listerはそれを釘付けます。 [可能な 'list-style-types'はディスク、円、四角形、10進数などですが、"箇条書き "はありません]（https：//developer.mozilla。org/ja/CSS/list-style-type） – steveax

ああ、すみません、ごめんなさい。私ははるかに疲れている。これは間違いなく問題だった、無効なlist-style-type。ありがとうございました！ – waffl

しかし、 'id ="＃product "'について不平を言う人もそうです！ –

私はこのような何かのために行くだろう

、

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

出典

2012-04-13 16:00:19 Udders

あなたのIDが間違っている確かだった

変更：

id="#product"

へ：

id="product"

出典

2012-04-13 16:01:02

#を削除し、それが動作するはずです、あなたのHTML内の余分な文字を持っているよう

<div id="#product">

を検索します。

出典

2012-04-13 16:02:09

ここに正しいコードです。 IDが間違っています。#productは部門内の商品である必要があります。

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

出典

2012-04-13 16:02:44

CSS - 単純な特異性の問題 - '＃div-id ul' - 'ul'のリストスタイルをオーバーライドしません。

答えて

関連する問題