将 CSS 应用于嵌套的 HTML 代码答案

【问题标题】：Apply CSS to nested HTML code将 CSS 应用于嵌套的 HTML 代码
【发布时间】：2016-03-03 15:04:02
【问题描述】：

所以，我在“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 文档的样式表，我想知道如何更改“Lorem”和“p”类中的文本。我尝试输入我的 CSS 文件：

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

什么都没有发生。如果有人可以帮助我，我将非常感激，谢谢。

【问题讨论】：

#Drugi 元素在哪里？
对不起，应该是“Prvi”
好的，我可以看到你的错误，我在下面更新我的答案:)
随便做吧：.Lorem { text-transform: uppercase; }

标签： html css class stylesheet

【解决方案1】：

试试这个：

.Lorem {
     text-transform: uppercase;
 }

【讨论】：

【解决方案2】：

<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

【讨论】：

我草率地复制了，但这只会影响文本：Lorem 类中的“Lorem ipsum”，我需要它来影响整个
是的，如果你想让这个 CSS 对页面中的所有 p 元素生效，你只需使用 .Lorem :)
但是 .Lorem 结束了，但是文本还在继续，我也需要它来影响继续的文本。
好的，使用可以做到这一点：p {......}。你在页面中的所有 p 元素都会影响这个 css

【解决方案3】：

#Prvi 没有任何具有Vrh 类的子级，而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>

【讨论】：

这是我能得到的最近的，但这也改变了我的 h2，在这种情况下我不希望这样。绝对让我走上正确的道路，
就是这样。非常感谢！
我没有。我投了你的票……但我不到 15 票，所以他们甚至不算数
这很奇怪，因为你的答案是帮助我的答案：p 谢谢
@DomenLisjak 请接受它作为答案，如果这是你的答案。