Introduction to CSS3 and new selectors_html/css_WEB-ITnose

1: Basic introduction

1: css version

css1: Defines the basic attributes of the web page: fonts, colors, fillers, basic selectors, etc.
css2: Added advanced features: floating, positioning, advanced selectors (child selectors, adjacent selectors, universal selectors)
css3: Follow modular development. Release time is not a point in time, but a time period. (2002-present)


2: New features of css3
(1) CSS selector
(2) New color system and transparency settings
(3) Implementation of multi-column layout
(4) Multiple background image effect
(5) Text shadow effect
(6) Open web font type
(7) Rounded corners
(8) Border background image
(9) Box shadow

(10) Media query

Two: New selector

Css3 new selector
(1)css3 attribute selector
(2)css3 structure pseudo-class selector
(3)css3 UI element status pseudo-class selector
(4) Other new selectors

1: Brother selector

China’s top ten outstanding figures

①Other people’s children< ;/p>

②Other people’s father

③Other people’s mother

④Other people’s husband

⑤Other people’s wife

⑥Other people’s father-in-law

⑦Other people’s Mother-in-law

⑧Other people’s company

⑨Other people’s receipt

⑩Other people Home employees

Note: (1) Do not select the first p tag, only select its brother
(2) Only Select the following sibling tags and cannot select forward.


2: Structure pseudo-class selector
(1) child series
first-child positive number
last-child reciprocal




nth-child(n);
nth-child(3n 1) Choose one of every two
nth-child(even); nth-child(2n) even number
nth-child( odd) ;nth-child(2n 1) odd number




nth-last-child(n) reciprocal
Others are the same as above


only -child is the only child element, the only child
Example: li:only-child{color:#f00;font-size:30px}




Example:
< ;style>
p:first-child{color:#f00;}

I am the first child element of my father. Unfortunately, I am not a p tag, so I cannot be selected

I am the second child element of my father

< ;p>I am the 3rd child element of my father

I am the 4th child element of my father

I am the 5th child of my father Element

I am the 1st child element of the father, and I am the p tag, so I was selected

I am the 2nd child element of the father

I am the 3rd child element of the father

I am the 4th child element of my father

I am the 5th child element of my father

(2) of-type series
fist-of-type
last-of-type
nth-of-type(n)
nth -last-of-type(n)
only-of-type
is similar to the child series, but only pays attention to similar tags and only counts similar tags.

(3)empty


(4)root
html:root{background:green}
is equivalent to
html{background:green}
The root of html is always the html element, the entire html page. It has no real meaning.