Shulou(Shulou.com)06/01 Report--

In CSS, there are four keywords that can theoretically be applied to any CSS property: initial (initial), inherit (inheritance), unset (not set), and revert (restore). The value of all can only be the above four keywords. This article will introduce initial, inherit, unset, revert and all

Initial

Represents the initial default value of the element attribute (which is defined by the official CSS specification)

Compatibility: not supported by IE

[note] the initial default values for each attribute move to this point

/ / the default value defined by display in the official CSS specification is inline.test {display: initial;} test text.

Test the second character

Inherit

Represents the calculated value of the attribute corresponding to the direct parent element of the element

Compatibility: not supported by IE7-

.box {border: 1px solid black; padding: 10px; width: 100px;} .test {border: inherit; height: 30px;} Test one, Test two

Unset

Unset is a little more complex than initial and inherit. Indicates that if the property recognizes inheritance by default, the value is inherit;, otherwise the value is initial. In fact, setting unset is equivalent to not setting the

Compatibility: not supported by IE, not supported by safari9-, not supported by ios9.2-, not supported by android4.4.4-

[common default inheritable style]

Colorcursordirectionfontletter-spacingline-heightlist-styletext-aligntext-indenttext-shadowtext-transformwhite-spaceword-breakword-spacingword-wrapwriting-mode

/ / the style of the element whose content is Test 1 is the same as that of the element whose content is Test 2. Box {border: 1px solid black; padding: 10px; width: 100px; color: red;} .Test1 {border: unset; color: unset;} Test 1 Test 2

Revert

Represents the default value of the element attribute defined in the style sheet. If the user defines the explicit settings in the stylesheet, press this setting; otherwise, define the style settings in the stylesheet according to the browser; otherwise, equivalent to unset

Compatibility: only supported by safari9.1+ and ios9.3+

All

Indicates that the property values of all CSS properties except unicode-bidi and direction are reset. The values can only be initial, inherit, unset and revert.

Compatibility: not supported by IE, not supported by safari9-, not supported by ios9.2-, not supported by android4.4-

.test {border: 1px solid black; padding: 20px; color: red;} .in {/ * all: initial; all: inherit; all: unset; all: revert; * /} Test text

[1] when all:initial, all properties of .in take default values

Border:none;padding:0;color:black

[2] when all:inherit, all attributes of .in take parent element inheritance values

Border:1px solid black;padding:20px;color:red

[3] when all:unset, all properties of .in are equivalent to no values, inheritable by default, and keep default values if uninheritable.

Border:none;padding:0;color:red

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.