如何将CSS应用于元素的内部层次？

假设有多少个div标签，并且如果在最内层有一个元素，那么如何访问该元素或为该元素声明css？如何将CSS应用于元素的内部层次？

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

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

来源

2011-07-16 Rahul Verma

你能澄清给一个class或id（如果它是唯一的）和风格？也许显示一些代码？ – pixelfreak

.....

element

.....

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

最简单的方法可能是定义一个CSS类，并使用该类的元素。

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

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

来源

2011-07-16 09:22:43

这要看具体你想要的风格是，说如果你有：

<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 */ 
}

来源

2011-07-16 09:30:29 pixelfreak

thanx为这样一个很好的答复，但如果有类似的方式一个div有id那么该属性将以相同的方式访问或不是？ –

@Rahul为id，使用＃号，如下所示：#page。content 这是一个很好的[阅读]（http://css.maxdesign.com.au/selectutorial/） – pixelfreak

@pixelfreak感谢您的回答，真的帮助。 – suat

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

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

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

来源

2011-07-16 10:14:59

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

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

.topdiv p { 
    ..... 
}

如果您需要更具体的，可以使用从申报单的一个一类进一步下跌的树，任代替.topdiv引用，或在它旁边：

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

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

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

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

还有一些其他的CSS选择器可能很方便知道，但这些是最常用的CSS选择器，并且最有可能帮助您解决问题。

来源

2011-07-16 10:19:38 Spudley

试试这个，我做到了，在这里它的工作原理

$(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' 
    }); 

});

和ALOS你的HTML代码在这里

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

我在几个方面进行测试和它的作品好。我等待着您的反馈

来源

2011-07-16 18:20:30 stefanz

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

<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{}

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

最好的，虽然是从那里

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

风格为

.paraWithBG{//background styles//}

来源

2011-07-16 18:28:16

如何将CSS应用于元素的内部层次？

回答

相关问题