[HTML5 + CSS3]CSS3 main Selector

CSS3 Selector has brought us a lot of convenience, previously can only use JS or specific elements to increase the specific class implementation effect, the following with the example record/share the role of each CSS3 selector.

(1) adjacent element selector x + y

<!--CSS -<styletype= "Text/css">Div ul + P{background:#F00; }</style><!--label -<Div>    <ul>I am the UL</ul>    <P>I'm p.</P>    <ol>I am the OL</ol>    <P>I'm p.</P></Div>

Browser effects:

Summary: Only select the P tag followed by UL, the other P tags are not selected.

(2) child element selector x > Y

<!--CSS -<styletype= "Text/css">ul{background:#000;Color:#FFF;}DIV > UL{background:#F00;}</style><!--label -<Div>    <ul>        <Li>I'm Ulli .<ul>I am level two UL</ul>        </Li>    </ul></Div>

Browser effects:

Summary: In order to better explain the problem, I initially gave all UL defined the background black. The actual display effect is the first UL background red, because we covered the CSS style in the beginning of the black,> selector will only select the immediate child elements, not the next generation of children.

(3) sibling element selector x ~ Y

<!--CSS -<styletype= "Text/css">UL ~ ol{background:#F00;}</style><!--label -<Div>    <ul>I am the UL</ul>    <ol>I am the OL</ol>    <P>I'm p.</P>    <ul>        <Li>            <ol>I'm level two ol.</ol>        </Li>    </ul>    <ol>I'm still ol '</ol></Div>

Browser effects:

Summary: A total of 3 ol,2 for the same level of UL, the instance shows the sibling ol element background is red, visible ~ The role of the selector: Select only the sibling specified element.

Not finished with, waiting to be updated ...

[HTML5 + CSS3]CSS3 main Selector