Question

我的HTML文件是：

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

我的CSS风格是：

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

但这种风格并没有修改＆＃34;汽车＆＃34; （第一个）。我做错了吗？这假设有效吗？

Answer 1

它不会设置任何内容，因为#differentstyle ul li会在<li/>内的<ul/>内选择#differentstyle，但<ul/>内没有#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 */
}

Answer 2

#differentstyle ul li：表示li内ul #differentstyle内li内ul内#differentstyle #differentstyle { padding-bottom: 50px; } }}

所以简单地使用：

{{1}}

更多信息：CSS selectors

Answer 3

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

即可

Answer 4

我认为你有身高问题。以及使用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;
}