CSS3 introduction and new selector, css3 new Selector

CSS3 introduction and new selector, css3 new Selector

I. Basic Introduction

1: css version

Css1: defines the basic attributes of a webpage: font, color, fill white, and basic selector.
Css2: added advanced features: Floating, positioning, advanced selector (Child selector, adjacent selector, General selector)
Css3: follows modular development. The release time is not a time point, but a time period. (2002-to date)


2: New Feature of css3
(1) CSS Selector
(2) New Color and transparent settings
(3) Implementation of Multi-Column Layout
(4) Multi-background image effects
(5) text shadow effect
(6) Open Network Font types
(7) rounded corners
(8) Border background image
(9) Box shadow

(10) Media Query

Ii. New Selector

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

1: sibling Selector
<Style>
P ~ P {color: # f00 ;}
</Style>
<Div> <! -- This div is a parent element -->
<P> Top 10 outstanding figures in China </p>
<P> ① children of other families </p>
<P> ② someone else's father </p>
<P> ③ another's mother </p>
<P> ④ husband of another family </p>
<P> ⑤ another wife </p>
<P> ⑥ other people's public </p>
<P> 7. Other women's mother-in-law </p>
<P> other companies </p>
<P> receive from others </p>
<P> staff of other people's homes </p>
</Div>


Note: (1) do not select the first p tag, but select its brother.
(2) select only the sibling tag.


2: Structure pseudo-class selector
(1) child Series
First-child positive number
Last-child countdown




Nth-child (n );
Select one nth-child (3n + 1)
Nth-child (even); nth-child (2n) even
Nth-child (odd); nth-child (2n + 1) odd




Nth-last-child (n) Reciprocal
Others same as above


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




Example:
<Style>
P: first-child {color: # f00 ;}
</Style>


<Div id = "A">
<H4> I am my father's 1st child element. Unfortunately, I am not a p tag, so I cannot be selected. <P> I am a father's 2nd child element </p>
<P> I am a father's 3rd child element </p>
<P> I am a father's 4th child element </p>
<P> I am a father's 5th child element </p>
</Div>


<Div id = "B">
<P> I am my father's 1st child element and I am a p tag, so I was selected </p>
<P> I am a father's 2nd child element </p>
<P> I am a father's 3rd child element </p>
<P> I am a father's 4th child element </p>
<P> I am a father's 5th child element </p>
</Div>


(2) of-type series
Fist-of-type
Last-of-type
Nth-of-type (n)
Nth-last-of-type (n)
Only-of-type
Similar to the child series, but only focus on similar labels, only count similar labels.

(3) empty


(4) root
Html: root {background: green}
Equivalent
Html {background: green}
The root of html is always an html element, and the entire html page. It has no practical significance.