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;}

< h4>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

< /div>


(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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn