Hack quick query table

Document directory

• Demo:

Suggestion: use the standard browser to write the code. If the compatibility problem occurs, try other methods to solve the problem, and use hack to solve the problem.

The following is my summary of the hack writing method:

Browser: Only IE6 +, FF, Safari, chrome, and opera are supported. (all non-ie versions as of January 12, are the latest versions ).

Test environment: Windows;

Doctype :.

Identifier	Example	IE6	IE7	IE8	Ie9	FF	OP	SA	Ch
*	. EQ {* color: #000 ;}	Y	Y	N	N	N	N	N	N
_	. EQ {_ color: #000 ;}	Y	N	N	N	N	N	N	N
+	. EQ {+ color: #000 ;}	Y	Y	N	N	N	N	N	N
-	. EQ {-color: #000 ;}	Y	N	N	N	N	N	N	N
>	. EQ {> color: #000 ;}	Y	Y	N	N	N	N	N	N
\ 0	. EQ {color: #000 \ 0 ;}	N	N	Y	Y	N	Y	N	N
\ 9	. EQ {color: #000 \ 9 ;}	Y	Y	Y	Y	N	N	N	N
\ 9 \ 0	. EQ {color: #000 \ 0 ;}	N	N	N \ y	Y	N	N	N	N
: Root. xx {XXX: XXX \ 9 ;}	: Root. EQ {color: # a00 \ 9 ;}	N	N	N	Y	N	N	N	N
* +	. EQ {* + color: #000 ;}	Y	Y	N	N	N	N	N	N
*-	. EQ {*-color: #000 ;}	Y	N	N	N	N	N	N	N
* Html	* Html. EQ {color: #000 ;}	Y	N	N	N	N	N	N	N
* + Html	* + Html. EQ {color: #000 ;}	N	Y	N	N	N	N	N	N
HTML *	HTML *. EQ {color: #000 ;}	Y	Y	N	N	N	N	N	N
[;	. EQ {color: red; [; color: Blue ;}	Y	Y	N	N	N	N	Y	Y
HTML> body	HTML> body. EQ {color: Blue ;}	N	Y	Y	Y	Y	Y	Y	Y
HTML>/**/body	HTML>/**/body. EQ {color: Blue ;}	N	N	Y	Y	Y	Y	Y	Y
Html/**/> body	Html/**/> body. EQ {color: Blue ;}	N	Y	Y	Y	Y	Y	Y	Y
@ Media all and (min-width: 0px ){}	@ Media all and (min-width: 0px) {. EQ {color: #000 ;}}	N	N	N	Y	Y	Y	Y	Y
*: First-Child + html	*: First-Child + HTML. EQ {color: Blue ;}	N	Y	N	N	N	N	N	N
*: First-Child + HTML {} * html	*: First-Child + HTML {} * html. EQ {color: Blue ;}	Y	N	N	N	N	N	N	N
@-Moz-document URL-prefix (){}	@-Moz-document URL-prefix () {. EQ {color: Blue ;}}	N	N	N	N	Y	N	N	N
@ Media screen and (-WebKit-Min-device-pixel-ratio: 0 ){}	@ Media screen and (-WebKit-Min-device-pixel-ratio: 0) {. EQ {color: Blue ;}}	N	N	N	N	N	N	Y	Y
@ Media all and (-WebKit-Min-device-pixel-ratio: 10000), not all and (-WebKit-Min-device-pixel-ratio: 0 ){}	@ Media all and (-WebKit-Min-device-pixel-ratio: 10000), not all and (-WebKit-Min-device-pixel-ratio: 0 ){. EQ {color: Blue ;}}	N	N	N	N	N	Y	N	N
Body: Nth-of-type (1)	Body: Nth-of-type (1). EQ {color: Blue ;}	N	N	N	Y	Y	Y	Y	Y

FF: Firefox; OP: opera; SA: Safari; Ch: chrome;YSupported. N indicates not supported.

Note:

• ·
  As various browsers are updated quickly, some hack may change, so please note.
• ·[;This method affects subsequent styles and is not optional.
• ·\ 9 \ 0Not all attributes can be differentiated from IE8 and ie9. for example, background-color is acceptable, but background is not allowed, and border is not allowed. Therefore, you need to test it in practice.
• · When both\ 0;*;_;, \ 0 is recommended to be written in front of * and. For example, color: Red \ 0; * color: Blue; _ color: green; feasible; otherwise, the effect in IE7 and IE6 will fail. Except for border, it can be placed before and after. For the sake of insurance, keep it in front.

Recommended Syntax: Demo:

. EQ {color: # f00;/* standard browser */color: # f30 \ 0;/* IE8, ie9, opera */* color: # c00; /* IE7 and IE6 */_ color: #600;/* IE6 exclusive */}: Root. EQ {color: # a00 \ 9;}/* ie9 exclusive */@ media all and (-WebKit-Min-device-pixel-ratio: 10000 ), not all and (-WebKit-Min-device-pixel-ratio: 0 ){. EQ {color: #450 ;}}/* opera exclusive */@ media screen and (-WebKit-Min-device-pixel-ratio: 0 ){. EQ {color: #879 ;}/ * WebKit exclusive */@-moz-document URL-prefix (){. EQ {color: # 4dd ;}/ * Firefox exclusive */