将 CSS 应用于嵌套的 HTML 代码

Question

所以，我在 "index.html" 文件中有这段代码：

<div id="Vsebina">
<div class="Slika"></div>
<div id="Prvi" class="Vrh">
<h2>Odstavek 1</h2>
<p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
</div>

我有一个链接到此 html 文档的样式表，我想知道如何更改 class "Lorem" 和 "p" 中的文本。我尝试在 CSS 文件中输入：

#Vsebina #Prvi .Vrh .Lorem{
    text-transform: uppercase;
}

没有任何反应。如果有人能帮助我，我将不胜感激，谢谢。

Answer 1

#Prvi 没有任何具有 Vrh class 的子代并且 text-transformation 无效属性所以这样做：

将 text-transformation: uppercase; 更改为 text-transform: uppercase;

将#Vsebina #Prvi.Vrh .Lorem更改为#Vsebina #Prvi.Vrh .Lorem

Jsfiddle

#Vsebina #Prvi.Vrh .Lorem  {
  text-transform: uppercase;
  color:red;
}

<div id="Vsebina">
  <div class="Slika"></div>
  <div id="Prvi" class="Vrh">

    <h2>Odstavek 1</h2>

    <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
  </div>
</div>

已更新

Jsfiddle

#Vsebina #Prvi.Vrh p  {
  text-transform: uppercase;
  color:red;
}

<div id="Vsebina">
  <div class="Slika"></div>
  <div id="Prvi" class="Vrh">

    <h2>Odstavek 1</h2>

    <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
  </div>
</div>

Answer 2

试试这个：

.Lorem {
     text-transform: uppercase;
 }

Answer 3

<div id="Vsebina">
    <div class="Slika"></div>
    <div id="Prvi" class="Vrh">
      <h2>Odstavek 1</h2>
      <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
    </div>

在上面的代码中，您错过了 ID 为 Vsebina 的关闭 div。你应该这样做：

<div id="Vsebina">
    <div class="Slika"></div>
    <div id="Prvi" class="Vrh">
      <h2>Odstavek 1</h2>
      <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
    </div>
</div>

您的 DOM 路径必须像这样：

#Vsebina #Prvi .Lorem

或

#Vsebina .Vrh .Lorem

将 CSS 应用于嵌套的 HTML 代码

Apply CSS to nested HTML code

html

css

class

stylesheet