2017-03-08 7 views
0

list-style-typeプロパティの特定の値を持つ順序付きリストがあり、その子に影響しないようにしたい。子のみではなく、親にリストスタイルスタイルを適用する

現在、順序付きリストにはネストされた別の順序付きリストがあり、list-style-type値を継承します。どうすればそれを無効にできますか?

<ol class='custom-ol'> 
    <li> cat1: 
    <ol style="list-style-type:lower-alpha"> 
    <li>text 1</li> 
    <li>text2</li> 
    </ol> 
    </li> 
    <li> 
    cat2: 
    <ol style="list-style-type:lower-alpha"> 
    <li>text 3</li> 
    <li>text 4</li> 
    </ol> 
    </li> 

私が得るものだという(更新版)

を私はそのように修正しようとしたが、それがすべてで働いていない

<style> 
    .custom-ol ol 
    { 
     counter-reset: custom-counter; 
     list-style-type: none; 
    } 
    .custom-ol ol li 
    { 
      counter-increment: custom-counter; 
    } 

    .custom-ol ol li:before 
    { 
      content:"(" counter(custom-counter) ") "; 
      font-weight:bold; 
    } 

</style> 

CSSスタイル

ol.custom-ol 
{ 
    counter-reset: custom-counter; 
    list-style-type: none; 
} 
ol.custom-ol li 
{ 
     counter-increment: custom-counter; 
} 

ol.custom-ol li:before 
{ 
     content:"(" counter(custom-counter) ") "; 
     font-weight:bold; 
} 

ol ol { 
    list-style-type: lower-alpha; 
} 

enter image description here

私は親が欲しいです(現在1はで(1)になります)。カスタムオールクラス と彼の子供たち、彼らは、bはとしても、(1)、(2)

答えて

0

せずにこれはあなたのCSSがどのように見えるかであるC:

ol.custom-ol 
{ 
    counter-reset: custom-counter; 
    list-style-type: none; 
} 
ol.custom-ol li 
{ 
     counter-increment: custom-counter; 
} 

ol.custom-ol li:before 
{ 
     content:"(" counter(custom-counter) ") "; 
     font-weight:bold; 
} 

ol ol { 
    list-style-type: lower-alpha; 
} 

ol ol li:before { 
    content: ""; 
} 
+0

cssのセレクタ? –

+0

@AdirZoariはい、その1 – Larpee

+0

@AdirZoari動作するかどうか教えてください – Larpee

0

あなたがしていますあなたの親をターゲットにしていないolあなたは子供たちをolの要素を2回狙っています。一度、インラインスタイリングを通じて:

CSSファイルを通じて

style="list-style-type:lower-alpha"

と一度:

.custom-ol ol 
    { 
     counter-reset: custom-counter; 
     list-style-type: none; 
    } 

あなたは子要素にlist-style-type: noneを無効にしたい場合は、.custom-ol.custom-ol olを変更します。これはあなたの親のolのみを対象とします。

また、このようstyle="list-style-type:lower-alpha"!importantを追加してみてください:

style="list-style-type: lower-alpha !important"

これは子供olに適用される任意の他のスタイルを上書きします。

+0

私は作ってみました! –

+0

適用したいスタイルとどの要素をより具体的にすることができますか? –

+0

はい、編集ポストを見て、私は写真を公開しました –

関連する問題