如何仅将 <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 选择器，由空格表示。 如果选择器为 B ，括号内的样式将应用于li元素内的所有A元素。

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

#footer li {
display: inline;
font-size: 1em;
margin-right: 10px
}
#footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
text-align: center
}

这样做的作用是将样式应用于 id CC_15 的元素内的任何#footer元素。

---

有关选择器的更多信息

有关后代组合器的更多信息