Question

假设有多个div标签，如果最内层有一个元素，那么如何访问该元素或为该元素声明css？

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p>element</p>
                   </div>
               .....
          </div>
     </div>
</div>

如何在单独的css文件中访问元素或为其设置背景图像？

Answer 1

这取决于您希望风格的具体，例如，如果您有：

<div class="page">
  <div class="content">
    <div class="some-container">
      <p class="description">Lorem Ipsum</p>
    </div>
  </div>
</div>

您可以根据需要将设置为通用/特定样式：

p
{
   color:red; /* Affects all p */
}

p.description
{
   color:blue; /* Affects all p with class description */
}

.some-container p
{
   color:black; /* Affects all p that is a descendant of an element with some-container class */

}
.page .content .some-container p.description
{
    color:white; /* You get the idea */
}

Answer 2

最简单的方法可能是定义一个css类并将该类用于元素。

.myCssClass{
 // --- css properties.
}

<div>
    <div>
        <div>
           <div>
               <div>
                  <input class="myCssClas" />
               </div>
           </div>
        </div>
   </div>
</div>

Answer 3

CSS选择器之间的空格允许您引用后代元素，无论它们在树下多远。

因此，如果您的顶级<div>有一个topdiv类，您可以使用一个简单的CSS选择器访问树中它下面的所有元素：

.topdiv p {
    .....
}

如果您需要更具体，可以使用树中更远的其中一个div的类，而不是.topdiv引用，或者与它一起使用：

.topdiv .middlediv p {
    .....
}

将引用元素中包含的所有middlediv元素，该元素本身包含在topdiv元素中。

您可以继续使用此模式，使其尽可能具体，以确保您只引用所需的元素。

如果需要更具体，可以使用尖括号>替换空格分隔符。这指定选择器中的下一个项目是前一个项目的直接子元素，而不是在树的任何位置。

有许多其他CSS选择器可能很方便了解，但这些是最常用的选择器，并且最有可能在您的情况下提供帮助。

Answer 4

你真的只需要知道上方元素的类，所以

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="something">
                           <p>element</p>
                   </div>
               .....
          </div>
     </div>
</div>

CSS将是

.something p{//background img styles//}

您也可以这样做

div div div div p{}

但是，只有这是页面的确切结构（中间没有元素）并且它没有在其他地方重复。

最好的方法是给一个class或id（如果它是唯一的）和样式

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p class="paraWithBG">element</p>
                   </div>
               .....
          </div>
     </div>
</div>

样式为

.paraWithBG{//background styles//}

Answer 5

部分问题是可能有1个或多个子元素适合您的描述，因此不存在一个“最内层”。如果你想要所有这样的“叶子”元素，你可以尝试使用像jQuery这样的东西：

function tagLeaves() { 
  if ($(this).children().size() == 0) {
    $(this).addClass("leaf");
  } else {
    $(this).children().each(tagLeaves);
  }
}
$(function () {
  $("#firstDiv").each(tagLeaves);
});

然后，您可以定义一组.leaf样式以应用于这些元素。

Answer 6

试试这个，我做了，在这里工作

$(function(){
    var t = $('#stefanz'),
        total = $('div',t).size() - 1 ;

    $('div',t).eq(total).children().css({
        'background-color' : '#000',
        'color' : '#fff',
        'padding' : '5px',
        'display' : 'inline-block'
    });

});

并且你在这里有html代码

<div id="stefanz">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <p>stefanz</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我在几个方面进行了测试，效果很好。我在等你的反馈

Answer 7

<style>

.foo p
{
    background : yellow;
}
</style>
 <div class="foo">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p>element</p>
                   </div>
               .....
          </div>
     </div>
</div>

尝试一下。这个对我有用！！

如何将css应用于元素的内部级别？

7 个答案: