0

これは CSS の特異性に関する非常に単純な問題ですが、どうにかして理解することはできません。

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

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>

これが機能していないことに少し驚いています。javascript を使用して $('#product ul') に特定のクラスまたは CSS スタイルを与える以外に、これを改善する方法はありませんか?

--

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

--

編集：おっと、すみません、私は持っていました：

<div id="#product">

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

list-style: disc
4

5 に答える 5

4

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

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

于 2012-04-13T16:02:45.900 に答える
4

IDが間違っています

変化する：

id="#product"

に：

id="product"
于 2012-04-13T16:01:02.360 に答える
2

これが正しいコードです。IDが間違っています。＃productはdiv内の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-13T16:02:44.627 に答える
1

私はこのようなものに行きます、

ul { list-style:none; }
#product ul {list-style:disc inside none; }
于 2012-04-13T16:00:19.943 に答える
1

HTMLに余分な文字があるようです

<div id="#product">

を削除する#と、動作するはずです。

于 2012-04-13T16:02:09.877 に答える