Question

我有一个'ul'标签已经设置了其他东西。我需要创建另一个'ul'标签来设置HTML页面中的其他内容。

这是第一个ul样式：

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-family: arial;
    color:white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

我需要设置另一个ul的样式，我在其中创建一个项目列表。我想要ul标签的默认CSS设置，但我不知道如何使其工作。

以下是ul列表的HTML代码：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

什么代码会使上面的ul标记回到默认的CSS设置？

Answer 1

最好为第一个ul分配一个类并为该CSS类添加样式，然后页面中的其他ul不会受到影响。

＆＃13;

.first-ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  font-family: arial;
  color: #000;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<ul class="first-ul">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

Answer 2

你可以使用相应的方式将二者包裹在一个div和样式中。

简单标记

<div class="somediv">
    <ul></ul>
    <ul></ul>
</div>

简单的css

.somediv ul:first-child {
    background: blue
}

.somediv ul:nth-child(2) {
    background: red
}

Answer 3

您可以为UL使用不同的类名（一个通用名称和一个不同的名称），并根据需要提供尽可能多的属性。

.common{
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-family: arial;
    color:white;
    text-align: center;
}

.red
{
color:red;
}

.green
{
color:green;
}

<ul class="common red">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul class="common green">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Answer 4

<div class="first">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
</div>
<div class="scnd">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

在样式表中添加如下内容

.first ul
{
    Your style here
}
.scnd ul
{
    Your style here
}

如何在HTML＆amp;中设置两个不同的<ul>标签的样式CSS？

4 个答案: