时间戳

首页 > 解决方案 > UL 和 LI 样式之间的冲突

html - UL 和 LI 样式之间的冲突

问题描述

我正在开发一个具有名为 Style.css 的 css 文件的 Web 项目。在该文件中，为 UL 和 LI 定义了一个样式系列，该系列已在项目的大部分部分和部分中使用。其结构如下：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

在项目的一部分中，我不得不使用TreeView。此对象需要具有以下结构的样式：

ul {
    list-style-type: none;
    padding-inline-start: -.5em;
}

li {
    list-style: none
}

我的问题是我应该如何使用这两种样式，以便第二种样式仅在 TreeView 中使用，并且对网站的其他部分没有其他影响。特别感谢所有的朋友。

标签： htmlcss

解决方案

你可以使用类ul：

.treeView {
  list-style-type: none;
  padding-inline-start: -0.5em;
}

.treeView li {
  list-style: none
}
<ul>
  <li>1</li>
  <li>2</li>
  <ul class="treeView">
    <li>3</li>
    <li>4</li>
  </ul>
</ul>

推荐阅读