In CSS 3, suppose you make an HTML file containing 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 the " ^ "
CSS will control [u]div#nav-primary and div#nav-secondary[/u] in this case. Please note that these two labels are preceded by nav , it is unclear whether it is separated by "-" or whether the ID is matched from front to back [sweat]
div[id$="primary"] { background:#ff0; }
Note that it is " $ "
CSS will control [u]div#nav-primary and div#content-primary[/u] in this case. Please note that there is primar after these two tags. It is unclear whether "-" is used as a separation, or whether the ID is matched from back to front [sweat]
div[id*="content"] { background:#ff0; }
Note that it is " * "
CSS in this case will control [u]div#content-primary div#content-secondary and div#tertiary-content[/u]. Please note that these tags all contain content . It is not clear whether they are separated by "-" or whether the ID is automatically scanned and matched [sweat]
It seems that the author said that these tags are now supported by the latest versions of various browsers except IE. You can try it, but I won’t try it~ [lol]
div#content-primary:target { outline:1px solid #300; }
Note that " :target "
In this case, CSS will control the anchor link http: //www.example.com/index.html #content-primary (the anchor link can be understood as a link within a web page, compared with the return seen on some web pages) top )
The author says that Mozilla and Safari browsers 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 to mean that the type in the form is text. . . What will [u]type="password"[/u] be?
input:checked { border:1px solid #090; }
Note that " :checked "
This is the CSS that controls the "select" of the form. . .
The author says that Opera and Mozilla browsers now support these
:root { background:#ff0; }
html { background:#ff0; }
Please pay attention to that " :root "
This ":root" is a higher-level tag than html. You can read this article written by Chidori Ichiba to correctly understand html and body. He discovered in the article that there is a frame outside html, hehe~
The author says that Mozilla and Safari browsers now support this
The next one : nth-child() is more interesting, haha~ You can put numbers and default letters in the brackets~
p:nth-child(3) { color:#f00; }
This seems to mean that based on the first appearing P, all P's that are multiples of "3" will be controlled~
p:nth-child(odd) { color:#f00; }
This seems to mean that based on the first P that appears, all odd numbers of P will be controlled~
p:nth-child(even) { color:#f00; }
This seems to mean that based on the first P that appears, all P's in even numbers will be controlled~
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
These two tags are equivalent, because the 0 after the first one has no effect. What it means is that P that is 3 times the first P that appears will be controlled~ (What a twist, HOHO~ [ rolleyes]) In other words, this "n" will take on a value from 0.1.2.3.4.5.6....~ As many P as you can calculate will be controlled. . .
tr:nth-child(2n+11) { background:#ff0; }
If you understand the above, this is not difficult to understand, but the label he controls has changed to "tr". This means that the table will become more varied. I feel that everyone must be good at arithmetic in elementary school and not learn well. Go home quickly and learn some elementary arithmetic again. . . (However, does such a label increase the efficiency of computer processing? [confused] I hope my frustration is unnecessary...)
p:last-child { background:#ff0; }
A p before p is controlled (NND, p comes and goes, hits pp [sweat])
:not(p) { border:1px solid #ccc; }
This p is not controlled. It means that it uses its own style. It should be used together with the previous ones. . .
p ~ ul { background:#ff0; }
ul is displayed with priority over p. I don’t know what priority method this is. . .
Basically, that’s all I can understand. You can go to the following two websites to continue learning. If I said anything wrong, remember to tell me.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/