CSS 3 selector explanation

Roger Johansson (this foreigner seems to be a W3C developer) wrote an article about CSS 3 a few days ago: CSS 3 selectors explained describes the new tags and usage of CSS 3 recently developed by w3c in last December. I can use machine translation to find out what I can understand, you can also learn advanced experience. Haha ~
In CSS 3, suppose you have made an HTML file that contains the following tag structure:
<Div id = "nav-primary"> </div>
<Div id = "content-primary"> </div>
<Div id = "content-secondary"> </div>
<Div id = "tertiary-content"> </div>
<Div id = "nav-secondary"> </div>
Then, in the CSS file
Div [id ^ = "nav"] {background: # ff0 ;}
Note: "^"
In this case, CSS will control [u] div # nav-primary and div # nav-secondary [/u]. Please note that the two tags are preceded by nav, which is separated by "-". It is unknown whether to match the IDs from the beginning to the end. [sweat]
Div [id $ = "primary"] {background: # ff0 ;}
Note: "$"
In this case, CSS will control [u] div # nav-primary and div # content-primary [/u]. Please note that the two tags are followed by primar, which is separated by "-". It is unknown whether to match the IDs from the back to the front. [sweat]
Div [id * = "content"] {background: # ff0 ;}
Note: "*"
In this case, CSS will control [u] div # content-primary div # content-secondary and div # tertiary-content [/u]. Please note that all these tags contain content, which is separated by "-". It is even more unknown whether the IDs are automatically scanned and matched. [sweat]
It seems that the author said that these labels are not supported by Internet Explorer, but are supported by various browsers of the latest version. You can try them and I will not try it ~ [Lol]
Div # content-primary: target {outline: 1px solid #300 ;}
Note the ": target"
In this case, CSS will control the http: // www.example.com/index.html?content-primary anchlink (the anchor can be understood as a link in a webpage, which is more like returning to the top of some webpages)
The author said that Mozilla and Safari now support this
Input [type = "text"]: enabled {background: # ffc ;}
Input [type = "text"]: disabled {background: # ddd ;}
Note that "[type =" text "]: enabled"
This is the CSS that controls the form. "[u] [type =" text "] [/u]" seems like the type in the form is text... What will [u] type = "password" [/u] be?
Input: checked {border: 1px solid #090 ;}