html - 如何只将 <li> css 应用于页脚而不是其他？

Question

在我的 CSS 中，我有我的 li设置 display: inline; .我知道 <li> 之间的任何事情和 </li>将显示内联。但是，我想要一些非内联的列表元素。我试过创建一个 <div>在我的页脚周围写display: inline;那里但出现了要点。我怎样才能让我的页脚保持内联，但可以自由选择我想要的 li 的其余部分？元素是什么？

HTML

<div id="footer">
   <p>
   <ul>
      <li><a href="index.html>Home</a></li>
      <li><a href="about.html>About</a></li>
      <li><a href="etc.html>Etc</a></li>
   </ul>
   </p>
</div>

...

<p> Lorem ipsum dolor sit amet </p>
<ol>
     <li> consectetur adipiscing elit </li>
     <li> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </li>
</ol>

CSS

li {
display: inline;
font-size: 1em;
margin-right: 10px;
}

#footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
text-align: center;
}

我想创建一个非内联列表。我尝试移动 display: inline;部分给 #footer但在页脚中有要点。如何在保留页脚格式的同时创建非内联列表？

Answer 1

您可以使用后代组合器定义一个 CSS 选择器，用空格表示 .如果您的选择器为 A B , 括号内的样式将应用于所有 B A 中的元素元素。

对于您来说，您可以使用如下 CSS:

#footer li {
display: inline;
font-size: 1em;
margin-right: 10px
}

#footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
text-align: center
}

这样做是将样式应用于任何 li id 为 #footer 的元素中的元素.

---

更多关于 selectors

更多关于 descendant combinators