第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

所有 CSS 規(guī)則都允許用于所有 HTML 元素嗎？它們都可以繼承嗎？

所有 CSS 規(guī)則都允許用于所有 HTML 元素嗎？它們都可以繼承嗎？

12345678_0001 2023-10-10 16:51:04
鑒于某些 CSS 規(guī)則是針對特定 HTML 元素量身定制的（一些示例 - object-fitfor <img>、<video>等；stroke以及fill針對各種 SVG 元素的其他 SVG 規(guī)則），并且在用于其他元素時不太有意義：將任何有效的CSS 規(guī)則應(yīng)用于任何 HTML 元素是否合法？任何規(guī)則都可以繼承嗎？繼承的值是什么，特別是當(dāng)它是從使用特定屬性沒有意義的元素繼承的情況下？我的具體問題是這樣的。我正在開發(fā)一個帶有模塊化 CSS 的按鈕組件。在這個按鈕內(nèi)，我可能有一個用于顯示圖標(biāo)的 SVG 元素。我希望能夠從組件外部將某些樣式應(yīng)用于圖標(biāo)（即描邊和填充），同時保留適當(dāng)?shù)姆庋b（因此深度選擇器是禁忌）。為了解決這個問題，我將 SVG 設(shè)置為從按鈕繼承描邊和填充。如果我現(xiàn)在將這些屬性應(yīng)用到按鈕，圖標(biāo)就會繼承它們，并且我會得到所需的結(jié)果！然而，這讓我想知道我所做的是否有效以及其他瀏覽器是否會有相同的行為。這似乎是常識，但要找到明確的答案卻出人意料地困難。如果有人可以向我指出規(guī)范的摘錄，甚至可能是一些支持表，我會很高興！考慮到我編寫代碼的方式，顯示 100% 準(zhǔn)確的示例有點太多了，但基本上我是在問這是否有效：.icon {  stroke: inherit;  fill: inherit;}.button {  stroke: #FFF;  fill: #999;}<button class="button">  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">    <g stroke-width="2" transform="translate(1 1)">      <path d="M14 2L2 14"/>      <circle cx="8" cy="8" r="8"/>    </g>  </svg>  <span>My button</span></button>
查看完整描述

2 回答

?
炎炎設(shè)計

TA貢獻(xiàn)1808條經(jīng)驗 獲得超4個贊

將任何有效的 CSS 規(guī)則應(yīng)用于任何 HTML 元素仍然合法嗎？

是的，但如果它不受支持或不適用于此類元素，您的瀏覽器可能會忽略它。

而且，任何規(guī)則都可以繼承嗎？

是的，但您應(yīng)該注意，繼承會考慮計算值，這可能會產(chǎn)生影響：

繼承 CSS 關(guān)鍵字使指定它的元素從其父元素獲取屬性的計算值。它可以應(yīng)用于任何CSS屬性，包括所有的CSS簡寫。

我沒有與 SVG 相關(guān)的簡單示例，但這是另一個示例：

.box {

? display:inline-block;

? float:left;

? width:200px;

? height:200px;

? border:1px solid red;

}


.box > div {

? display:inherit;

? border:1px solid green;

}

<div class="box">

? <div>text</div>

</div>

注意內(nèi)部 div 的displayequal toblock和 notinline-block因為 float 會強制顯示的計算值被 block for.box


為了避免處理繼承問題，您可以考慮適合您情況的 CSS 變量：


.icon {

? stroke: var(--s);

? fill: var(--f);

}


.button {

? --s: #FFF;

? --f: #999;

}

<button class="button">

? <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">

? ? <g stroke-width="2" transform="translate(1 1)">

? ? ? <path d="M14 2L2 14"/>

? ? ? <circle cx="8" cy="8" r="8"/>

? ? </g>

? </svg>

? <span>My button</span>

</button>


查看完整回答
反對 回復(fù) 2023-10-10
?
守著星空守著你

TA貢獻(xiàn)1799條經(jīng)驗 獲得超8個贊

相同的級聯(lián)和繼承規(guī)范指出：

即使屬性不適用（如“適用于”行所定義），計算值也存在。但是，某些屬性可能會根據(jù)屬性是否適用于元素來更改確定計算值的方式。

因此，每個元素的每個屬性都會有一個計算值，但可能不使用它（所謂的使用值，即計算值之后的下一步，是無）。計算出的值將被繼承。

這對于我的 SVG 按鈕示例意味著什么：

  1. 我絕對被允許設(shè)置stroke和。它在渲染自身時會忽略此屬性，但如果需要，會將其傳遞給其子級。fill<button>

  2. 默認(rèn)情況下，子 SVG 將繼承這些屬性（我什至不需要明確指定）。

  3. stroke和 的計算值fill沒有任何警告，因此我可以期望繼承正確的顏色（確實如此！）。


查看完整回答
反對 回復(fù) 2023-10-10
  • 2 回答
  • 0 關(guān)注
  • 133 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號