针对div中类之前的文本。

Question

我有这个div

<div>
    Questions about these terms
    <ol class="alphabetical">
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:support@example.com">support@example.como</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

我还有别的div

<div>
content here...
</div>

在同一份文件中。我想特别强调一下这段文字。

**Questions about these terms**
    <ol class="alphabetical">

发生在这个类<ol class="alphabetical">之前的

这不起作用

.alphabetical::before {
 font-weight:bold !important;
}

有什么方法可以用简单的css定位文本吗？

Answer 1

不同的方法，有些方法是

1. 包装您想要粗体的文本i html <b></b>-tags
2. 将您想要用粗体表示的文本包装为i html <span></span>-tags，然后使用css进行样式转换。
3. 在父div上设置font-weight，然后在ol-element选择器上使用font-weigth: initial;。

Answer 2

不能使用该选择器访问此文本。

相反，将其包装到另一个内联元素，如span、b或其他元素，然后使用选择器获取该元素：

​

span.header {
  font-weight: bold;
}

<div>
    <span class="header">Questions about these terms</span>
    <ol class="alphabetical">
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:support@example.com">support@example.como</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

​

参见：*以前是如何工作的。

更新：

如果您想在不包装文本的情况下获得此文本，则可以使用以下内容：

<div class="container">
    Questions about these terms
    <ol class="alphabetical">
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:support@example.com">support@example.como</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

/* Selects each <div>, but only if it is the */
/* only <div> element inside its parent */
/* without container class */

div:only-of-type {
  font-weight: bold;
}
div > * {
  font-weight: initial;
}

Answer 3

只需将文本包装在div或p(或两者都)中，并给出一个类并将其样式化。例如：

<div>
    <p class="foo">Questions about these terms </p>
    <ol class="alphabetical">
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:support@example.com">support@example.como</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

和css：

.foo {
 font-weight: bold;
}