Some new selectors have been added to the CSS3 that are different from the previous ones. Some of these selectors are similar to the jquery selector, which allows us to manipulate the DOM much more.
For a more intuitive understanding we use this as an example to operate
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Title</title>6 </Head>7 <Body>8 <ul>9 <Li>First Test title</Li>Ten <Li>A second Test title</Li> One <Li>A third Test title</Li> A <Li>Fourth Test title</Li> - <Li>Fifth Test title</Li> - </ul> the </Body> - </HTML>
: Nth-of-type (n) selects each element that belongs to the nth element of its parent element.
and this is similar to: First-of-type and: Last-of-type Select the first element and the last element, respectively
DEMO:
<style>Li:nth-of-type (3){/* Select 3rd li element * /Background-color:#00b3ee; }Li:first-of-type{/* Select the first LI element * /Background-color:#ee1200; }Li:last-of-type{/* Select last li element * /Background-color:#00ee0f; }
</style>
: Before add content before element content
: After to add content after element content
These two elements are similar to the following: hover but they are not mouse hover but use the content property to add the contents
It is important to note that the content added with CSS cannot be selected or be displayed as a CSS style type by JS.
DEMO:
li:before{ Content: ' Add contents in front '; } li:after{ content: ' added in the back '; }
: Focus is also similar to what we use: hover is used to dynamically select the element that gets focus
DEMO: Do not change the background color as the input box that gets the focus
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>Input:focus{Background-color:#00b3ee; } </style></Head><Body>input Box 1:<inputtype= "text"><BR>input Box 2:<inputtype= "text"></Body></HTML>
: Nth-child (n) Select the nth child element of each parent element
: Nth-last-child (n) Select the nth element of each parent element from the backward forward number
: Last-child selects the last child element of each parent element
Note that this selector is used with caution because the choice of face is too big to control
DEMO:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>: Not (P){Border:Solid Red 1px; } </style></Head><Body> <Div> <P>I'm the P element.</P> <P>I'm the P element.</P> <P>I'm the P element.</P> <span>I'm not p element I'm the span element</span> <P>I'm the P element.</P> </Div></Body></HTML>
CSS3 Advanced Selector