Question

这是一个非常简单的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

Answer 1

您的ID错误

变化：

id="#product"

为：

id="product"

Answer 2

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

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

Answer 3

这是正确的代码。你的错误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>

Answer 4

我会选择这样的事情，

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

Answer 5

看起来你的html中有一个额外的字符

<div id="#product">

删除#，它应该有效。

CSS - 简单的特异性问题 - '＃div-id ul' - 不会覆盖'ul'的列表样式

5 个答案: