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

你的身份证有误

改变：

id="#product"

到：

id="product"
于 2012-04-13T16:01:02.360 回答
4

bullet不是有效的列表样式类型值。

此外，如果这不是问题，请检查您是否在任何地方都没有li样式。无论特殊性如何，元素的样式都会li覆盖元素的样式。ul

于 2012-04-13T16:02:45.900 回答
2

这是正确的代码。你有错误的 id #product 应该是你的 div 中的产品。

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