html - 通过css修改不同的列表

Question

我的 HTML 文件是：

asdfasdf
<ul>
    <li id="differentstyle">Car</li>
    <li>Car1</li>
    <li>Travel</li>
</ul>

我的 CSS 样式是：

#differentstyle ul li {
    padding-bottom: 50px;
}

但这种风格并没有修改“汽车”（第一个）。我做错什么了吗？这应该有效吗？

score 1 · Accepted Answer

它没有任何样式，因为#differentstyle ul li选择了一个<li/>inside a <ul/>inside #differentstyle，但没有 <ul/>inside your #differentstyle。采用

ul li {
    padding-bottom: 50px;
}

相反，如果您想为所有<li/>元素设置样式。或使用

#differentstyle {
    padding-bottom: 50px;
}

如果您只想设计第一个样式<li/>。或者，如果它真的只是第一个您想要不同样式的样式并且您只想将样式应用于特定列表，请将您的 html 更改为

<ul id="yourClass">
    <li>Car</li>
    <li>Car1</li>
    <li>Travel</li>
</ul>

并使用这个 css：

#yourClass > li {
    padding-bottom: 50px;
}

#yourClass > li:first-child {
    padding-bottom: 100px; /* different style for the first item */
}

score 1 · Accepted Answer

#differentstyle ul li: 意思是，li里面ul里面，里面#differentstyle没有li里面。ul#differentstyle

所以只需使用：

#differentstyle {
    padding-bottom: 50px;
}

更多信息：CSS 选择器

score 0 · Accepted Answer

您的选择器#differentstyle ul li {的意思是“匹配一个 li，它是一个 ul 的后代，它是一个 id 为'不同样式'的元素的后代”。如果你想定位第一个 li，只需使用#differentstyle { ... }

score 0 · Accepted Answer

我觉得你身高有问题。和一些代码问题，margin-bottom: 50px;而不是padding-bottom

所以删除你的所有代码。只需尝试添加以下代码

<ul>
    <li id="differentstyle">Car</li>
    <li>Car1</li>
    <li>Travel</li>
</ul>

CSS：

ul 
{
    height:160px;//Its not a important 
}

ul li 
{
    margin-bottom: 50px;
}

4 回答 4