我该如何设定两种不同的风格 <ul> HTML和CSS中的标签？

Question

I have a 'ul' tag that already styles something else. I need to create another 'ul' tag to stylize something else in my HTML page.

This is the first ul style:

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%);
}

I need to style another ul where I create a list of items. I want the default CSS settings for the ul tags, but I don't know how to make that work.

Here is the HTML code for the ul list:

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

What code will make the above ul tag go back to the default CSS settings?

Answer 1

Better assign a class for the first ul and add styles for that CSS class, then other ul in the page will not get affected.

 .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%); } 

 <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> 

Answer 2

You could wrap the two inside of a div and style using accordingly.

simple markup

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

simple css

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

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

Answer 3

You can use different class names (one common and one different name) to the UL and give as many properties as you wish.

 .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>

add like this in your stylesheet

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