亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS究竟是如何工作的?

CSS究竟是如何工作的?

皈依舞 2021-06-01 17:44:50
目前,我正在使用 CSS。我無法理解 CSS 究竟是如何工作的。如果我想將 "border: 1px solid red" 應用于 CSS 父元素,那么它只應用于父元素,而不應用于該父元素內的其他元素(子元素)。但是,如果我應用“顏色:紅色”,則顏色屬性將應用于父級內的每個子級(包括父級本身)。示例 1:<div class="parent">    Inside parent class    <div class="child">Inside child class 1</div>    <div class="child">Inside child class 2</div></div>.parent {  border: 1px solid red;}示例 2:<div class="parent">    Inside parent class    <div class="child">Inside child class 1</div>    <div class="child">Inside child class 2</div></div>.parent {  color: red;}為什么 example-1 適用于父元素,而不適用于子元素。示例 2 工作正常,符合我的預期。
查看完整描述

3 回答

?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

一些 CSS 屬性“級聯”到子元素,有些則沒有。border是一個不級聯的例子。

MDN 文檔中的更多信息。


查看完整回答
反對 回復 2021-06-11
?
慕無忌1623718

TA貢獻1744條經驗 獲得超4個贊

這背后的原因是 CSS 屬性繼承。所有 HTML 元素對于所有 CSS 屬性都有一組默認值。

顏色屬性通常設置為“繼承”,因此,子元素將繼承該屬性的父元素值,除非子元素明確地將該屬性設置為另一個值。

另一方面,邊框屬性沒有“繼承”,因為它是默認行為,因此不會繼承父值,除非您也專門設置了它。

希望這可以幫助!


查看完整回答
反對 回復 2021-06-11
?
小唯快跑啊

TA貢獻1863條經驗 獲得超2個贊

在 CSS 中,繼承控制在沒有為元素的屬性指定值時發生的情況。參考任何 CSS 屬性定義以查看特定屬性是否默認繼承 ("Inherited: yes") 或不繼承 ("Inherited: no")。


從繼承 - CSS:級聯樣式表 | MDN


并非所有屬性都是默認繼承的,color例如是,但border不是。您必須參考文檔(如MDN或w3schools)以了解屬性是否設置為默認繼承。


但是,您可以使用關鍵字 value 顯式設置元素屬性以繼承其父屬性的值inherit,如下所示:


.parent {

  border: 1px solid red;

}


.child {

  border: inherit;

}

<div class="parent">

  Some text

  <div class="child">Child element</div>

  <div class="child">Child element</div>

</div>

/!\繼承不要與級聯混淆,級聯是定義應用于多個選擇器所針對的元素的樣式聲明的機制。


查看完整回答
反對 回復 2021-06-11
  • 3 回答
  • 0 關注
  • 204 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號