Question

我有以下有序列表：

<ol>
    <li>
        <span>Title</span>

        <ol>
            <li>Info</li>
            <li>Info</li>
        </ol>
    </li>
</ol>

使用CSS我只需要将样式应用于父li，因此只有1. Title而不是子ol。我该怎么做？

我尝试了以下内容：

body > ol > li {
    /* Styling here */
}

和

body > ol > li > span {
    /* Styling here */
}

但两者都没有产生预期的效果。

body > ol > li {
  font-weight: bold;
  font-size: 20px;
}


/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

<body>
  <ol>
    <li>
      <span>Title</span>
      <ol>
        <li>Info</li>
        <li>Info</li>
      </ol>
    </li>
  </ol>
</body>

Fiddle

Answer 1

我将此CSS添加到您的代码中：

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

     //Action
}

＆＃13;

span + ol {
  font-weight: initial;
  font-size: initial;
}

＆＃13;

body > ol > li {
  font-weight: bold;
  font-size: 20px;
}

span + ol {
  font-weight: initial;
  font-size: initial;
}

/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

＆＃13;

Fiddle

Answer 2

我认为唯一的解决方案是手动重置孩子ol上的样式，如下所示：

ol ol {
  /* Reset styling */
}

Fiddle

Answer 3

如果我正确理解您要实现的目标，则需要声明

body > ol > li:first-child { color: #FFF; }
body > ol > li:first-child > ol { color:#000; }

参见示例：https://jsfiddle.net/6mhajeLf/4/

Answer 4

尽管Blaze Sahlzen有最好的答案，但另一种可能的解决方案：

https://jsfiddle.net/6mhajeLf/6/

通过向不需要加粗的项目添加类并使用!important来完成。有点脏，但它确实有效。

.not-bold {
  font-weight:300 !important;
}

仅设置父列表的样式

4 个答案: