將CSS應用於特定div的所有元素

Question

我有這個代碼：

 <div class="main"> <div class="div1"> <div> <p> <a href="#"></a> </p> <span></span> </div> <p>Loremp Loremp</p> <p>Loremp Loremp</p> <a href="#">Loremp Loremp</a> <span>Hello World</span> </div> <div class="div2"> <p>Loremp Loremp</p> <p>Loremp Loremp</p> <a href="#">Loremp Loremp</a> <span>Hello World</span> </div> </div> 

有沒有什么辦法讓我能夠在沒有應用於div2情況下定位div1所有元素？

我想要做的是使CSS代碼非常簡單，而不必逐個定位div1每個元素。

 /*I want to make something like that but without affecting the div2*/ *{ color: blue; } 

Answer 1

剛剛放

.div1 * {
 color: blue;
}

或者更好，只是

.div1 {
 color: blue;
}

在我的第一個代碼塊中，具有類div1的元素的所有子元素將具有color: blue應用。

在第二個代碼塊中，只有類div1的元素將具有color: blue應用， 但所有子元素也將繼承它（除非它們覆蓋它）。 因此效果應該是相同的。

Answer 2

首先， 不 ：使用.div1 *最終會咬你的屁股。

最好的方法是將樣式應用於.div1 {...}並依賴繼承。

如果你有div1中的文本，你不想要樣式，你可能想要將樣式應用於div1的（直接）子節點： .div1 > * {...} 。 從這一點上依靠繼承。

像頂部提出的示例更具體的內容會產生意想不到的副作用，並且會讓您越來越需要增加選擇器的特異性。
導致像.div1 p ul li .foo div span.bar {...} ，並用.div1 p ul li .foo div span.bar * {...}覆蓋它等等。 （戲劇）

如果您的問題是標記中的鏈接，那么您應該考慮對鏈接標記進行通用的“重置”/修改，以便它們更好地適應周圍的文本：sth。 喜歡。

a,
a:active {
    color: inherit;
}

也許你想把它限制在特定的上下文中，比如.main

編輯：

好的，P.Lionel，這是另一回事; 我同意。
使用.someSliderPluginClassName * { box-sizing: border-box }是實現此快速簡便的合適方式，並且具有可管理的風險。

您正在使用.container （在評論中）作為此slider-plugin元素的上下文類型，並對此插件進行全部控制。 （幾乎）在這種情況下你無需處理/風格。

另一方面，您可以考慮將樣式遷移到box-sizing: border-box 。 伊莫。 它是更好，更一致的拳擊模型，越來越多的插件（和css框架）依賴於此。

我知道，現在這是一種努力，但它可能在未來得到回報。 只需我5美分。

Answer 3

您可以使用CSS選擇器，其中包含您在HTML中為div屬性指定的類的名稱。

.div1 {
   color: blue;
}

提示：避免在CSS中使用通用選擇器（例如.div1 * { 。即使它具有疏忽的性能過載 ，它也會產生影響 ，除了是效率最低的選擇器之外，它還沒有考慮到 。

Answer 4

您可以使用此選擇器匹配所有子項：

.div * {

}

或者如果要匹配特定的元素類型：

.div * p {

}

請參閱： https ： //www.w3.org/TR/CSS21/selector.html#descendant-selectors

Answer 5

默認情況下繼承屬性color 。 這意味着您只需要在父元素上設置此屬性，然后所有子元素將自動繼承它。

.div1{
 color: blue;
}