如何僅對有序列表項進行樣式設置？嵌套在

Question

非無序列表項

，所以我想創建this

這是到目前爲止我的代碼：

CSS

ol{ 
    list-style-type:decimal; 
} 
ol li{ 
    color: #9e9e9e; 
    font-size:50px; 
    font-weight:lighter; 
    list-style-position:inside; 

} 

HTML

<ol> 
     <li> 
      <ul> 
      <li><b>Title</b></li> 
      <li><p class="subtitulos"Subtitle</p></li> 
      <li>Stuff 1</li> 
      <li>Stuff 2</li> 
      <li>Stuff 3</li> 
      </ul> 
     </li> 
    </ol> 

相反，我得到的一切風格像數字（標題，副標題，東西等..）

我用離子框架製作應用程序

Answer 1

根據您要完成，我建議把大的數字，在申報單，而不是試圖巢名單什麼。這樣你可以控制定位。下面我爲數字div創建了一個.num類。我還添加了.wrap類，其中display: table圍繞數字div和列表。然後我在.num和ul上設置display: table-cell，這樣它們顯示的高度相等。然後，我在.num上設置vertical-align: middle，以便它垂直居中。

ul { 
 
    list-style-type: none; 
 
    display: table-cell; 
 
} 
 

 
ul li { 
 
    color: #9e9e9e; 
 
    font-size: 18px; 
 
    font-weight: lighter; 
 
    list-style-position: inside; 
 
} 
 

 
.wrap { 
 
    display: table; 
 
    margin: 20px 0; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.num { 
 
    display: table-cell; 
 
    font-size: 30px; 
 
    vertical-align: middle; 
 
}

<div class="wrap"> 
 
    <div class="num">1</div> 
 
    <ul> 
 
    <li><b>Title 1</b></li> 
 
    <li> 
 
     <p class="subtitulos">Subtitle 1</p> 
 
    </li> 
 
    <li>Stuff 1</li> 
 
    <li>Stuff 2</li> 
 
    <li>Stuff 3</li> 
 
    </ul> 
 
</div> 
 
<div class="wrap"> 
 
    <div class="num">2</div> 
 
    <ul> 
 
    <li><b>Title 2</b></li> 
 
    <li> 
 
     <p class="subtitulos">Subtitle 2</p> 
 
    </li> 
 
    <li>Stuff 1</li> 
 
    <li>Stuff 2</li> 
 
    <li>Stuff 3</li> 
 
    </ul> 
 
</div>

Answer 2

用變量計算數字（1,2,3）然後使用例如一個表或div框來使用flexbox來呈現視圖會更容易嗎？

.row { 
 
    display: flex; 
 
    flex-basis: 1 
 
    flex-flow: row; 
 
    align-items: center; 
 
    border: 1px solid #666; 
 
    margin-bottom: 10px; 
 
} 
 

 
.left { 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 50px; 
 
    padding: 0 0 0 10px; 
 
} 
 

 
ul li { 
 
    color: #9e9e9e; 
 
    font-size:30px; 
 
    font-weight:lighter; 
 
    list-style: none; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <div class="left"> 
 
     1 
 
    </div> 
 
    <div class="right"> 
 
     <ul> 
 
     <li><b>Title</b></li> 
 
     <li><p class="subtitulos"Subtitle</p></li> 
 
     <li>Stuff 1</li> 
 
     <li>Stuff 2</li> 
 
     <li>Stuff 3</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="left"> 
 
     2 
 
    </div> 
 
    <div class="right"> 
 
     <ul> 
 
     <li><b>Title</b></li> 
 
     <li><p class="subtitulos"Subtitle</p></li> 
 
     <li>Stuff 1</li> 
 
     <li>Stuff 2</li> 
 
     <li>Stuff 3</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您可以選擇直接OL裏的孩子，李必須是OL或UL的直接孩子。它仍然會選擇嵌套的ol li。

ol > li {} 

但是，您應該改用類和樣式類。 HTML選擇器太寬，會遇到選擇器衝突。