CSS'deki ilk ve unset değerleri arasındaki fark nedir?

Question

Basit bir örnek:

HTML

<p style="color:red!important"> 
    this text is red 
    <em> 
     this text is in the initial color (e.g. black) 
    </em> 
    this is red again 
</p> 

CSS

em { 
    color:initial; 
    color:unset; 
} 

initial ve unset arasındaki fark nedir? your link göre bir cevap

benim yorumunu Hareketli Sadece destekleyen tarayıcılar

CanIUse: CSS unset value

Developer Mozilla Web CSS initial

Answer 1

_:

unset inherit" aynı olan CSS değeridir "eğer bir mülk devredilirse ya da erty İşte

miras değil bir örnektir:

pre { 
 
    color: #f00; 
 
} 
 
.initial { 
 
    color: initial; 
 
} 
 
.unset { 
 
    color: unset; 
 
}

<pre> 
 
    <span>This text is red because it is inherited.</span> 
 
    <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span> 
 
    <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span> 
 
</pre>

bir senaryo nereye sen olur senin stil biraz CSS geçersiz kılmak için çalışıyorum, ama eğer olursa olsun is fark Değeri, tarayıcı varsayılanına geri almak yerine miras almayı tercih eder. Örneğin

:

pre { 
 
    color: #00f; 
 
} 
 
span { 
 
    color: #f00; 
 
} 
 
.unset { 
 
    color: unset; 
 
} 
 
.initial { 
 
    color: initial; 
 
}

<pre> 
 
    <em>Text in this 'pre' element is blue.</em> 
 
    <span>The span elements are red, but we want to override this.</span> 
 
    <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span> 
 
    <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span> 
 
</pre>

Answer 2

Ben resmi CSS alıntı yapmak istiyorum | her arasındaki farklar bakarken ileride başvurmak için MDN belgelerine:

INITIAL

Başlangıç ​​CSS anahtar sözcüğü, bir özelliğin ilk değerini bir öğeye uygular. Her CSS özelliğine izin verilir ve mülkün başlangıç ​​değerini kullanmak için belirtildiği öğeye neden olur. O nedenle, örneğin uygun

: ilk özelliği elemanının ilkcolor özelliği muhafaza nasıl

em { 
 
    color:initial; 
 
    /* color:unset; */ 
 
}

<p style="color:red!important"> 
 
    this text is red 
 
    <em> 
 
     this text is in the initial color (e.g. black) 
 
    </em> 
 
    this is red again 
 
</p>

not edin.

UNSET

unset CSS anahtar kelime

ilk birleşimidir ve anahtar kelimeleri devralır. Diğer iki CSS geneli anahtar kelimesi gibi, CSS kısayolu da dahil olmak üzere herhangi bir CSS özelliğine uygulanabilir. Bu anahtar kelime, mülkünü kendi ebeveynden mi yoksa yoksa başlangıç ​​değerine miras alırsa, miras alınan değerine sıfırlar. Diğer bir deyişle, ilk durumda devralma anahtar kelimesi gibi davranır ve ikinci durumda ilk anahtar kelime gibi davranır. Bu nedenle sizin örneğe göre

:

em { 
 
    /* color:initial; */ 
 
    color:unset; 
 
}

<p style="color:red!important"> 
 
    this text is red 
 
    <em> 
 
    this text's color has been unset (e.g. red) 
 
    </em> 
 
    this is red again 
 
</p>

Not nasıl unset özellik sadece sıfırlar elemanın color özelliği. SONUÇ

İÇİNDE

fikri oldukça yalındır, ancak her iki CSS özellikleri ... o bugün itibariyle ise çapraz tarayıcı uyumluluğu ile uğraşırken pratikte ben dikkatli tavsiye ediyorum.