时间戳

首页 > 解决方案 > 为什么我不能在深度 3 中更改列表的样式

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

问题描述

也许标题让你感到困惑，但它正是标题所说的，我尝试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>

如您所见，color: red深度3中没有应用，有人可以帮助我，为什么会出现这种行为以及如何解决？我们可以在没有Make a New Class 的情况下实现它吗？

标签： htmlcss

解决方案

元素在错误的位置，它们应该根据您的 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>

推荐阅读