Question

是否有理由在list-style和<ul>或<li>上覆盖CSS <li>？

Answer 1

每{{}}}您可以使用list-style-type在任何元素上定义display:list-item。

据我所知，在现代浏览器中，您可以将任何元素设置为display: list-item，以便 - 如果您愿意 - 您可以在其中任何一个上正确使用list-style-type属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>12084892</title>
    <meta charset="utf-8">
    <style>
        div span {
            display:list-item; 
            list-style-type: disc; 
            list-style-position: inside;
        }
    </style>
</head>
<body>
<div>
<span>One</span>
<span>Two</span>
</div>
</body>
</html>

除了琐事之外，你想要获得什么样的行为？如果您希望同一列表中的不同列表项具有不同的项目符号，则您需要在list-style-type上自行定义li。如果您希望给定li内的所有ul具有相同的子弹，则由您决定。我通常在ul上定义它。对我个人而言，这样做更直观。

Answer 2

如果查看CSS spec，您会看到该属性旨在为“display: list-item”元素设置样式。

如果未在<li>元素上明确定义属性，则继承该属性，因此您应该坚持仅将样式应用于<li>个元素。

Answer 3

如果是同一个，不。只要在方便的时候定义它;除非明确覆盖，否则<li>将继承<ul>的{{1}}。

Answer 4

继承将list-style和ol元素的“ul”值转移到li个元素。

所以我认为你应该只将样式应用于li元素。

Answer 5

即使列表样式是从UL / OL继承的，您也应该将css list-style定义为li。您可以在一个列表中相互创建不同的列表样式。例如：

ul.test li {
list-style:disc;
margin:0 0 0 20px;
}
ul li:first-child {
list-style:circle;
}

Answer 6

您通常只应在list-style和ul元素上设置ol，因为这可以避免由级联规则引起的意外和意外问题。请参阅CSS 2.1规范中的description of `list-style。

例如，ol li { list-style: upper-roman; }可能看起来很安全，但请考虑一下：

<ol>
  <li>foo
  <ul>
    <li>bar
  </ul>
</ol>

现在，带有“bar”内容的内部li元素将应用列表样式，因为它与选择器ol li匹配。（确实，使用选择器ol > li可以避免这种情况，但它存在浏览器兼容性问题。）

设置ol { list-style: upper-roman; }代替避免此问题，因为现在内部li不匹配，并且它从其父list-style（具有合适的设置）继承ul在浏览器默认样式表中。）

但是，如果您希望某个特定列表项的样式与同一列表中的其他项不同，则需要直接在list-type上设置li。在这种情况下，您通常会使用id选择器或仅与该特定元素匹配的其他选择器，而不是任何内部li元素。

我应该在<li>或<ul>上定义列表样式吗？</ul> </li>

6 个答案: