Css selector and css3 Selector

Css selector and css3 Selector

<div id='container'>    <ul id='ul'>        <li>            hello            <ul>                <li>hello</li>                <li>hello</li>                <li>hello</li>            </ul>        </li>        <li>hello</li>        <li>hello</li>        <li>hello</li>    </ul></div><a href="#">frfr</a><a href="#">frfr</a><a href="#">frfr</a>

I. # container ul {
Border: 1px solid red;
}, I chose the ul tag of # container's child sun. See:

Ii. # container> ul {
Border: 1px solid red;
}, The # container sub-tag ul is selected.

Check again

Iii. # container ~ A {
Color: red;
} Is to select all the # container Class a labels, see

IV. a [title] {
Color: red;
} Attribute selector. the font of all a tags with the title attribute is red and the html code is:

<a href="#" title='hello'>frfr</a><a href="#" title='hello'>frfr</a><a href="#">frfr</a>

Effect:

V. a [title = 'hello'] {
Color: red;
} Specifies the attribute value selector. The a tag of title = 'Hello'. the html code is as follows:

<a href="#" title='hello'>frfr</a><a href="#" title='hell'>frfr</a><a href="#">frfr</a>

Is:

6. a [title * = 'hes'] {
Color: red;
} The value of the attribute title contains all the tags of 'hes', which are regular expressions. the html code is:

<a href="#" title='hello'>frfr</a><a href="#" title='hell'>frfr</a><a href="#">frfr</a>

Is:

VII. a [title ^ = 'hes'] {
Color: red;
} The value of the attribute title is a tag starting with 'he'. The html code is:

<a href="#" title='hello'>frfr</a><a href="#" title='hell'>frfr</a><a href="#" title='jjhe'>frfr</a>

Is:

8. a [title $ = 'hes'] {
Color: red;
} The a tag whose attribute title value ends with 'he'. The html code is:

<a href="#" title='hello'>frfr</a><a href="#" title='hell'>frfr</a><a href="#" title='jjhe'>frfr</a><a href="#" title='sdddhe'>fwww</a>

Is:

IX. input [type = 'checkbox']: checked {
Border: 1px solid red;
} The checked selector in the check box is selected:, html code:

<input type='checkbox' checked>hee<input type='checkbox' checked>ff<input type='checkbox' >ff

The result is that the first two inputs are selected.

10. *: not (){
Color: red;

} Except for tag a, the page contains color: red. The html code is as follows:

<div id='container'>    <ul id='ul'>        <li>            hello            <ul>                <li>hello</li>                <li>hello</li>                <li>hello</li>            </ul>        </li>        <li>hello</li>        <li>hello</li>        <li>hello</li>    </ul></div><input type='checkbox' checked>hee<input type='checkbox' checked>ff<input type='checkbox' >ff<a href="#" title='hello'>frfr</a><a href="#" title='hell'>frfr</a><a href="#" title='jjhe'>frfr</a><a href="#" title='sdddhe'>fwww</a><a href="http://baidu.com">a</a><a href="b.jpg" data-b='foo'>b</a><a href="#" data-c='foo'>c</a>

Is:

 

11. # p: first-letter {
Color: red;
} The first letter in the selected selector. the html code is:

<p id='p'>hellowolrd</p>

Is:

12. # p: first-line is the first line selected.

13. # ul> li: nth-child (2 ){
Color: red;
} # The second sub-element li in ul. the html code is:

<ul id='ul'>        <li>            hello            <ul>                <li>hello</li>                <li>hello</li>                <li>hello</li>            </ul>        </li>        <li>hello</li>        <li>hello</li>        <li>hello</li>    </ul>

Is:

14. li: nth-last-child (n) indicates the nth li element in the inverse direction.

15th:

A [title ~ = 'Hes'] {
Color: red;
} Is that the title value can only be an independent 'hes' string. the html code is:

<a href="#" title='he'>dd</a><a href="#" title='he ll'>dd</a><a href="#" title='hel'>dd</a>

Is:

16th,

A: last-of-type {
Color: red;
} The font of the last a tag is red, and the html code is:

<a href="#" title='he'>dd</a><a href="#" title='he ll'>dd</a><a href="#" title='hel'>dd</a>

Is:

17th:

A: nth-last-of-type (1 ){
Color: red;
}, The first a tag from the bottom is selected, and the html code is:

<a href="#" title='he'>dd</a><a href="#" title='he ll'>dd</a><a href="#" title='hel'>dd</a>

Is:

18. a: nth-of-type (n) means the same as above, but it is just a proper number.

There are some other things that I have tested and I don't understand. I didn't write them up.

Ps: Welcome to supplement ~~~~ Attach a link for clearer http://www.cnblogs.com/libingql/p/4375354.html