CSS選擇以匹配單個列表元素中嵌套列表

我有嵌套列表，類似於下面的一個：CSS選擇以匹配單個列表元素中嵌套列表

<ol> 
    <li>Item 1 
     <ol> 
      <li>Item 2</li> 
      <li>Item 3 
       <ol> 
        <li>Item 4 
         <ol> 
          <li>Item 5</li> 
         </ol> 
        </li> 
        <li>Item 6 
         <ol> 
          <li>Item 7</li> 
         </ol> 
        </li> 
       </ol> 
      </li> 
     </ol> 
    </li> 
</ol>

項目1,5和7都是孤<li>元件，即，它們是唯一的在他們的具體父母的等級中。我想匹配他們並交換他們的子彈元素。（我也將開放給一個JavaScript解決方案，但我寧願純CSS，如果可能的話）。

來源

2015-04-03 Firona

你的意思是，項目2,5和7，對吧？（1有一個嵌套列表） – LinkinTED 2015-04-03 11:52:34

不，我的意思是項目1,5和7.項目2和項目3與同一父母處於同一級別。項目1在該級別上沒有其他項目，即使它仍具有嵌套列表。 – Firona 2015-04-03 11:56:01

我認爲你可以使用:only-child僞類。

見參考文獻：http://www.w3.org/TR/css3-selectors/#only-child-pseudo

訣竅需要兩個CSS規則。

ol li:only-child規則可能會導致繼承問題。

使用li:only-child *取消第一條規則的任何效果。

似乎在這個例子中工作正常。

ol li:only-child { 
 
    font-weight: bold; 
 
} 
 
li:only-child * { 
 
    font-weight: normal; 
 
}

<ol> 
 
    <li>Item 1 
 
     <ol> 
 
      <li>Item 2</li> 
 
      <li>Item 3 
 
       <ol> 
 
        <li>Item 4 
 
         <ol> 
 
          <li>Item 5</li> 
 
         </ol> 
 
        </li> 
 
        <li>Item 6 
 
         <ol> 
 
          <li>Item 7</li> 
 
         </ol> 
 
        </li> 
 
       </ol> 
 
      </li> 
 
     </ol> 
 
    </li> 
 
</ol>

來源

2015-04-03 12:06:24

根據佈局，OP可能希望將選擇器的範圍縮小到「ol> li：only-child'和'li：only-child> ol'，以免阻止繼承。 – BoltClock 2015-04-03 12:36:18

@BoltClock我喜歡你的建議，制定一套更清晰的規則。如果您有時間添加幾個單詞，請隨時編輯/改進答案。 – 2015-04-03 12:38:46

這裏是一個基於jQuery選擇，如果這是任何使用：

$('li').filter(function() { return $(this).siblings().length == 0 })

https://jsfiddle.net/5ge811g5/

來源

2015-04-03 11:56:13 stovroz

甜蜜的解決方案！ – LinkinTED 2015-04-03 12:07:41

CSS選擇以匹配單個列表元素中嵌套列表

回答

相關問題