Question

如何仅使用CSS将粗体样式设置为此代码中的“标题”？

.container > ol {
  font-weight: bold;
}

<div class="container">
  <ol type="I">
    <li>
      Title 1
      <ol>
        <li>sub 1</li>
        <li>sub 2</li>
      </ol>
    </li>
    <li>
      Title 2
      <ol>
        <li>sub 1</li>
        <li>sub 2</li>
      </ol>
    </li>
  </ol>
</div>

Answer 1

您可以在第一级n设置加粗，然后在第二级<ol>重置。

<ol>

.container ol {
  font-weight: bold;
}
.container ol ol {
  font-weight: normal;
}

Answer 2

ol li { font-weight: 700 }
ol li ol li {font-weight: 300 }

Answer 3

您可以使用以下CSS：

.container ol li {
  font-weight: bold;
}

.container ol li ol li{
  font-weight: normal;
}

Answer 4

li
{
  font-weight:normal;
}
.container > ol>li {
  font-weight: bold;
}

为li添加规则。这迫使孩子<li>元素使用自己的风格，而不是从父母那里继承它。

Answer 5

使用span标记中的标题而不是该范围应用 font-weight：bold ol >li > span {font-weight:bold;} 工作示例：http://jsbin.com/gifaliluve/edit?html,css,output

以下是代码：

<html>
<body>
<head>
<style>
ol >li > span {font-weight:bold;}
</style>
</head>
<div class="container">
<ol type="I">
  <li>
    <span>Title 1</span>
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
  <li>
    <span>Title 1</span>
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
</ol>
</div>
</body>
</html>

Answer 6

将所有li设置为font-weight normal，然后仅将粗体应用于原始ol的直接子项。

＆＃13;

li {
  font-weight: normal;
}

.container > ol:first-child > li {
  font-weight: bold;
}

＆＃13;

<div class="container">
<ol type="I">
  <li>
    Title 1
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
  <li>
    Title 2
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
</ol>
</div>

＆＃13;

Answer 7

问题是你已经将有序列表嵌套在你试图专门定位的li中。请尝试以下方法：

.container > ol > li {
  font-weight: bold;
  }
.container > ol > li ol {
  font-weight: normal;
  }

<div class="container">
<ol type="I">
  <li>
    Title 1
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
  <li>
    Title 2
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
</ol>
</div>

或者，另一种方式：

.container li {
  font-weight: bold;
  }
.container > ol > li > ol > li {
  font-weight: normal;
  }

<div class="container">
<ol type="I">
  <li>
    Title 1
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
  <li>
    Title 2
    <ol>
      <li>sub 1</li>
      <li>sub 2</li>
    </ol>
  </li>
</ol>
</div>

Answer 8

Nth-child将为每个子项制作粗体第一个子项

ol> li> ol>li:nth-child(odd){
font-weight:bold;
}

编辑1：对不起我理解错了，这可能会有所帮助。

 ol>li {
    font-weight:bold;
}

ol > li > ol > li {
    font-weight:normal;
}

希望有所帮助，

如何仅将粗体设置为第一级列表元素？

8 个答案: