【问题标题】:Apply style when all childs are the same当所有孩子都相同时应用样式
【发布时间】:2012-08-13 18:46:49
【问题描述】:

我有一个罕见的需求:

只有当我有<ol>childs 并且没有更多标签时,我才需要样式“list-style:none”。

例如,在这种情况下,我将应用样式:

<div>
  <ol><li>1</li></ol>
  <ol><li>2</li></ol>
</div>

相互之间,我将禁用样式:

 <div>
  <p>
  <ol><li>1</li></ol>
</div>

最好的方法是什么?谢谢

【问题讨论】:

  • 我不认为这仅在CSS中是可能的,对于这种类型的条件行为,我认为你需要使用JavaScript。但我很想被证明是错误的。
  • 哈哈,不可能什么都不是!!
  • 使用纯 CSS 做很多事情是不可能的,相信这可能就是其中之一。您需要 JavaScript 或服务器端的东西来根据内容在
    标记上设置不同的类名。
  • 列表是如何生成的?
  • 那么你就不能硬编码不同的类吗?

标签: html css css-selectors pseudo-class


【解决方案1】:

这对于纯 CSS 是不可能的。您必须修改 HTML 以手动添加类,或者使用脚本确定内部是否只有 ol 元素而没有其他类型的子元素,然后应用类或样式。

【讨论】:

【解决方案2】:

试试这个。

div ol:only-of-type {
    list-style: none;
}

现在任何只有一个 li 元素的列表都应该设置为没有列表样式的样式。

仅兼容 IE9+(以及其他所有版本)

来源:http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

演示:http://jsfiddle.net/RGnJW/

【讨论】:

  • 不,这个伪类只有在只有一个
      孩子时才有效
  • 您对:only-of-type 的描述有误,:only-of-type 在这里无论如何也行不通。
【解决方案3】:

您可以使用以下 CSS:

ol li {
    list-style: none;
}

【讨论】:

  • :(这不是解决方案,如果您的答案将是解决方案,我不会在stackoverflow中问这个
猜你喜欢
相关资源
最近更新 更多
热门标签