list-style does not return to default

Question

Well, I’m developing a website, and the following problem has arisen:

I reset all elements of the site;

*{
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    background-color:inherit;
    margin:0;
    padding:0;
    text-decoration:none;
    border:none;
    outline:none;
    box-sizing:border-box;
    list-style:none;
}

However, now I need to use a list with the balls of the list, so I used the css below:

.video-description ul,.video-description ol{
    list-style:initial;
    list-style-type:disc;
    list-style-position:outside;
    list-style-image:initial;
    padding:0 0 0 24px;
    margin:12px 0 24px;
}

However, the balls do not appear again, how can I fix the problem ? (I tested with a normal ul)

Answer 1

The style list-style is applied to the element li. How your disk reset is only on ul, in the case of the definition in * is applied.

To fix, set the rule for the elements li:

* {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background-color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  outline: none;
  box-sizing: border-box;
  list-style: none;
}

.video-description ul,
.video-description ol {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: initial;
  padding: 0 0 0 24px;
  margin: 12px 0 24px;
}
.video-description ul li,
.video-description ol li {
  list-style: initial;
}
body {
  margin: 20px;
}

<h1>
Lista fora dos divs
</h1>
<div>
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
<hr />
<h1>
Lista ul
</h1>
<div class="video-description">
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</div>