list-style-type: none is added or ul li in it?

Many times we all need more of the elements of the list is initialized by adding the list-style-type to the list elements: none, but as I often tangled white of a question: Is it in or added to the ul li in it

I tried it, and added ul li can achieve the same effect, as follows

The list-style-type: none added to the li:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端小王子</title>
    <style>
        /*reset*/
        body{
            margin: 0;
        }
        ul{
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
        }
        li{
            list-style-type: none;
        }
        
        /*list*/
        .list{
            width: 125px;
            margin: 50px auto;
            background-color: #e8e8e8;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>放假了</li>
        <li>Globe buy it </ li > 
        < li > The world is so big </ li > 
        < li > You can not only look </ li > 
        < li > You can also walk around </ li > 
    </ ul > 
</ body > 
< / HTML >

Although you can remove the front sign, li the list-style-type also is none, but ul of list-style-type is still the disc, and fell short of our desired, and also not in line with w3c standards, take a look at the default value of ul

display: block;
list-style-type: disc;
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;
padding-left: 40px;

Look at the li

display: list-item;

This case is very clear - and should list-style-type: none ul is added, to see results:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端小王子</title>
    <style>
        /*reset*/
        body{
            margin: 0;
        }
        ul{
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
            list-style-type: none;
        }

        /*list*/
        .list{
            width: 125px;
            margin: 50px auto;
            background-color: #e8e8e8;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>放假了</li>
        <li>买个地球仪吧</li > 
        < li > The world is so big </ li > 
        < li > You can not only look </ li > 
        < li > You can also walk around </ li > 
    </ ul > 
</ body > 
</ HTML >

After ul li inherit from the over list-style-type, list-style-type value ul li and it is none of the

over

list-style-type: none is added or ul li in it?

Guess you like