Learn Javascript
4_1_snippet

項目列表

範例

  1. 預設項目的CSS

    看內容 
    
    <ul>
      <li>
        <ul>
          <li>利用標籤:例如,ul,li,form</li>
          <li>利用attribute: <a href="#css-by-attribute" class="highlight">上節(CSS by attribute)</a></li>
        </ul>
      </li>

      <li>
        <p>LI後的第1個P</p>
        <ul>
          <li>只選下一層(僅一層), .top &gt; li</li>    
          <li>div.top。
            　+ ,ul .top</li>
        </ul>
      </li>
    </ul>

  2. 自行指定項目的CSS(注意下面🐞和上面預設CSS的位置不一樣)

    看內容 
    

    <style>
    ul {
      list-style: none;
    }
    ul > li::before {
      content: "📌";  
      display: inline-block;  
      margin-right: 0.2rem; 
    }
    ul  ul > li::before {
      content: "✔" ;
      display: inline-block;  
    }
    ul  ul  ul > li::before {
      content: "🤷";
      display: inline-block;  
    }
    </style> 

    <ul>
      <li>
        <ul>
          <li>利用標籤:例如,ul,li,form</li>
          <li>利用attribute: <a href="#css-by-attribute" class="highlight">上節(CSS by attribute)</a></li>
        </ul>
      </li>
      <li>
        <p>LI後的第1個P <-🐞不正常</p>
        <ul>
          <li>只選下一層(僅一層), .top &gt; li</li>    
          <li>div.top。
            　+ ,ul .top</li>
        </ul>
      </li>
    </ul>

  3. 修正上面的不正常段落::first-child

    看內容 
    

    <style>
    ul {
      list-style: none;
    }
    ul > li::before {
      content: "📌";  
      display: inline-block;  
      margin-right: 0.2rem; 
    }
    ul  ul > li::before {
      content: "✔" ;
      display: inline-block;  
    }
    ul  ul  ul > li::before {
      content: "🤷";
      display: inline-block;  
    }
    li >p:first-child { /*👏*/
      display:inline-block;
      border: solid green 1px;
    }	
    </style> 

    <ul>
      <li>
        <ul>
          <li>利用標籤:例如,ul,li,form</li>
          <li>利用attribute: <a href="#css-by-attribute" class="highlight">上節(CSS by attribute)</a></li>
        </ul>
      </li>

      <li>
        <p>這是LI後的第1個P <-修正後👍</p>
        <ul>
          <li>只選下一層(僅一層), .top &gt; li</li>    
          <li>div.top。
            　+ ,ul .top</li>
        </ul>
      </li>
    </ul>

前 後