Question

也许标题让您感到困惑，但标题恰恰说明了这一点，我尝试根据条件将list-style-type更改为其他类型，但是每当我尝试转到depth-3时，它都无法改变风格

/* success to Change*/

#paham-post-content ul li{
    margin-left: 2%;
    margin-top: 1vh;
    list-style-type: disc;
    color: green;
}

#paham-post-content ul li > ul li{
    list-style-type: circle;
    color: green;
}

#paham-post-content ul li > ol li{
    list-style-type: decimal;
    color: green;
}

/* Failed to Change*/

#paham-post-content ul li > ul li > ul li{
    list-style-type: square;
    color: red;
}

#paham-post-content ul li > ul li > ol li{
    list-style-type: decimal;
    color: red;
}

#paham-post-content ul li > ol li > ul li{
    list-style-type: square;
    color: red;
}

#paham-post-content ul li > ol li > ol li{
    list-style-type: lower-alpha;
    color: red;
}


/* success to Change*/

#paham-post-content ol li{
    margin-left: 2%;
    margin-top: 1vh;
    list-style-type: decimal;
    color: green;
}

#paham-post-content ol li > ul li{
    list-style-type: disc;
    color: green;
}

#paham-post-content ol li > ol li{
    list-style-type: lower-alpha;
    color: green;
}

/* Failed to Change*/

#paham-post-content ol li > ul li > ul li{
    list-style-type: square;
    color: red;
}

#paham-post-content ol li > ul li > ol li{
    list-style-type: decimal;
    color: red;
}

#paham-post-content ol li > ol li > ul li{
    list-style-type: square;
    color: red;
}

#paham-post-content ol li > ol li > ol li{
    list-style-type: lower-alpha;
    color: red;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body id="paham-post-content">

<h1>ul li</h1>

<ul>
	<li>
    	ul li
    </li>
    
	<li>
    	<p>ul li</p>
        <ul>
        	<li>
            	ul li ul li
            </li>
        	<li>
            	ul li ul li
            </li>
        </ul>
    </li>
    
	<li>
    	<p>ul li</p>
        <ol>
        	<li>
            	ul li ol li
            </li>
        	<li>
            	ul li ol li
            </li>
        </ol>
    </li>
    
	<li>
    	<p>ul li</p>
        <ul>
        	<li>
            	ul li ul li
            </li>
            <ul>
              <li>
                ul li ul li ul li
              </li>
              <li>
                ul li ul li ul li
              </li>
            </ul>
        </ul>

        <ul>
        	<li>
            	ul li ul li
            </li>
            <ol>
              <li>
                ul li ul li ol li
              </li>
              <li>
                ul li ul li ol li
              </li>
            </ol>
        </ul>

        <ol>
        	<li>
            	ul li ol li
            </li>
            <ul>
              <li>
                ul li ol li ul li
              </li>
              <li>
                ul li ol li ul li
              </li>
            </ul>
        </ol>


        <ol>
        	<li>
            	ul li ol li
            </li>
            <ol>
              <li>
                ul li ol li ol li
              </li>
              <li>
                ul li ol li ol li
              </li>
            </ol>
        </ol>

	</li>
</ul>


<h1>ol li</h1>

<ol>
	<li>
    	ol li
    </li>
    
	<li>
    	<p>ol li</p>
        <ul>
        	<li>
            	ol li ul li
            </li>
        	<li>
            	ol li ul li
            </li>
        </ul>
    </li>
    
	<li>
    	<p>ol li</p>
        <ol>
        	<li>
            	ol li ol li
            </li>
        	<li>
            	ol li ol li
            </li>
        </ol>
    </li>
    
	<li>
    	<p>ol li</p>
        <ul>
        	<li>
            	ol li ul li
            </li>
            <ul>
              <li>
                ol li ul li ul li
              </li>
              <li>
                ol li ul li ul li
              </li>
            </ul>
        </ul>

        <ul>
        	<li>
            	ol li ul li
            </li>
            <ol>
              <li>
                ol li ul li ol li
              </li>
              <li>
                ol li ul li ol li
              </li>
            </ol>
        </ul>

        <ol>
        	<li>
            	ol li ol li
            </li>
            <ul>
              <li>
                ol li ol li ul li
              </li>
              <li>
                ol li ol li ul li
              </li>
            </ul>
        </ol>


        <ol>
        	<li>
            	ol li ol li
            </li>
            <ol>
              <li>
                ol li ol li ol li
              </li>
              <li>
                ol li ol li ol li
              </li>
            </ol>
        </ol>

	</li>
</ol>

</body>
</html>

如您所见，深度3中没有应用color: red，有人可以帮我吗，为什么会发生这种现象以及如何解决呢？没有开设新班级，我们可以做到吗？

Answer 1

这些元素放置在错误的位置，根据您的CSS样式，它们应位于LI内。我固定了一些，这样很清楚。

/* success to Change*/

#paham-post-content ul li {
  margin-left: 2%;
  margin-top: 1vh;
  list-style-type: disc;
  color: green;
}

#paham-post-content ul li>ul li {
  list-style-type: circle;
  color: green;
}

#paham-post-content ul li>ol li {
  list-style-type: decimal;
  color: green;
}


/* Failed to Change*/

#paham-post-content ul li>ul li>ul li {
  list-style-type: square;
  color: red;
}

#paham-post-content ul li>ul li>ol li {
  list-style-type: decimal;
  color: red;
}

#paham-post-content ul li>ol li>ul li {
  list-style-type: square;
  color: red;
}

#paham-post-content ul li>ol li>ol li {
  list-style-type: lower-alpha;
  color: red;
}


/* success to Change*/

#paham-post-content ol li {
  margin-left: 2%;
  margin-top: 1vh;
  list-style-type: decimal;
  color: green;
}

#paham-post-content ol li>ul li {
  list-style-type: disc;
  color: green;
}

#paham-post-content ol li>ol li {
  list-style-type: lower-alpha;
  color: green;
}


/* Failed to Change*/

#paham-post-content ol li>ul li>ul li {
  list-style-type: square;
  color: red;
}

#paham-post-content ol li>ul li>ol li {
  list-style-type: decimal;
  color: red;
}

#paham-post-content ol li>ol li>ul li {
  list-style-type: square;
  color: red;
}

#paham-post-content ol li>ol li>ol li {
  list-style-type: lower-alpha;
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body id="paham-post-content">

  <h1>ul li</h1>

  <ul>
    <li>
      ul li
    </li>

    <li>
      <p>ul li</p>
      <ul>
        <li>
          ul li ul li
        </li>
        <li>
          ul li ul li
        </li>
      </ul>
    </li>

    <li>
      <p>ul li</p>
      <ol>
        <li>
          ul li ol li
        </li>
        <li>
          ul li ol li
        </li>
      </ol>
    </li>

    <li>
      <p>ul li</p>
      <ul>
        <li>
          ul li ul li
          <!--  This ul below should be inside the li not outside  -->
          <ul>
            <li>
              ul li ul li ul li
            </li>
            <li>
              ul li ul li ul li
            </li>
          </ul>
        </li>

      </ul>

      <ul>
        <li>
          ul li ul li
          <ol>
            <li>
              ul li ul li ol li
            </li>
            <li>
              ul li ul li ol li
            </li>
          </ol>
        </li>

      </ul>

      <ol>
        <li>
          ul li ol li
        </li>
        <ul>
          <li>
            ul li ol li ul li
          </li>
          <li>
            ul li ol li ul li
          </li>
        </ul>
      </ol>


      <ol>
        <li>
          ul li ol li
        </li>
        <ol>
          <li>
            ul li ol li ol li
          </li>
          <li>
            ul li ol li ol li
          </li>
        </ol>
      </ol>

    </li>
  </ul>


  <h1>ol li</h1>

  <ol>
    <li>
      ol li
    </li>

    <li>
      <p>ol li</p>
      <ul>
        <li>
          ol li ul li
        </li>
        <li>
          ol li ul li
        </li>
      </ul>
    </li>

    <li>
      <p>ol li</p>
      <ol>
        <li>
          ol li ol li
        </li>
        <li>
          ol li ol li
        </li>
      </ol>
    </li>

    <li>
      <p>ol li</p>
      <ul>
        <li>
          ol li ul li
        </li>
        <ul>
          <li>
            ol li ul li ul li
          </li>
          <li>
            ol li ul li ul li
          </li>
        </ul>
      </ul>

      <ul>
        <li>
          ol li ul li
        </li>
        <ol>
          <li>
            ol li ul li ol li
          </li>
          <li>
            ol li ul li ol li
          </li>
        </ol>
      </ul>

      <ol>
        <li>
          ol li ol li
        </li>
        <ul>
          <li>
            ol li ol li ul li
          </li>
          <li>
            ol li ol li ul li
          </li>
        </ul>
      </ol>


      <ol>
        <li>
          ol li ol li
        </li>
        <ol>
          <li>
            ol li ol li ol li
          </li>
          <li>
            ol li ol li ol li
          </li>
        </ol>
      </ol>

    </li>
  </ol>

</body>

</html>

为什么我不能在depth-3中更改列表的样式

1 个答案: