如何將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應用於元素的內部層次？

回答

相關問題