Get the App
SLTechnology News&Howtos  ›  Development  › 

How to apply the special symbols of CSS

Shulou Source: shulou.com Published: 2022-06-01 06:39:31 09月19日 Update

This article mainly introduces "how to apply the special symbols of CSS". In the daily operation, I believe that many people have doubts about how to apply the special symbols of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the special symbols of CSS". Next, please follow the editor to study!

1. Backslash (\)

Applicable browser: IE/Mac

The backslash (\) hack takes advantage of a bug of IE/Mac. Css comments that end with\ * / are not properly closed on IE/Mac, so statements that need to be ignored on IE/Mac can be placed after such comments.

/ * CSS comment: ignore the following statement on IE Mac\ * / selector {... styles... } / * ignore end * / 2, underscore (_)

Applicable browser: IE6 and below

Versions of IE 6 and below recognize an attribute with an underscore prefix, while other browsers ignore it. Therefore, an attribute preceded by an underscore or hyphen becomes a proprietary property of browsers of IE6 and below.

# elem {width: [W3C Model Width]; _ width: [BorderBox Model];}

PS: this hack uses an invalid CSS using the browser's bug, so it is not recommended.

3. Asterisk (*)

Applicable browser: IE7 below version

In addition to underscores and hyphens, IE versions 7 and below recognize attributes prefixed with non-alphabetic characters, while other browsers ignore them.

# elem {width: [W3C Model Width]; * width: [BorderBox Model];}

PS: this hack uses an invalid CSS using the browser's bug, so it is not recommended.

4. Asterisk HTML (* html)

Applicable browser: IE4-6

The HTML element is the root element of the W3C standard DOM, but there is also a mysterious parent element in versions of IE 4 through 6. Fully compatible browsers will ignore this * html selector, but IE4-6 will handle it normally.

* html p {font-size: 5em;}

PS: this HACK uses a fully valid CSS.

5. Asterisk plus sign (* +)

Applicable browser: IE7

*: first-child+html p {font-size: 5em;}

Or:

* + html p {font-size: 5em;}

PS: only works well in the IE7 standard model, but not in weird mode. At the same time, it is also supported by IE8's compatibility mode, which is equivalent to IE7's standard mode. It also uses a valid CSS.

6. Sub-selector (>)

Applicable browsers: IE6 or above and non-IE browsers

IE6 and earlier versions do not support "sub-selectors" (>), which we can use to specify special rules for other browsers.

Html > body p {color: blue;} 7, sub-selector with comments (> / * /)

Applicable browsers: IE7 or above and non-IE browsers

Although IE7 supports pair child selectors, IE7 can also be excluded by the following hack methods. When an empty comment is repeated immediately after the subselector, IE7 does not recognize the following rules, just like earlier browsers.

Html > / * * / body p {color: blue;} at this point, the study on "how to use the special symbols of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Tags: Browsers versions selections special symbols applications underscores attributes comments learning elements asterisks standards patterns support valid prefixes slashes methods Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Docker Microsoft macOS MySQL vpn