<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* Different levels of CSS priority 1. Important overrides element styles defined anywhere in the page. 2. Style written inside the element as a style attribute 3. Id selector 4. Class selectors 5. Label selectors 6. Wildcard selectors 7
#myId {
color:green;
}
.my-class {
color:blue;
}
p {
color:red; {} *color:pink;
font-size: 24px;
}
.my-class-a..my-class-b {
color:orange;
}
.my-class-c .my-class-d {
color: purple;
}
.my-class-e>.my-class-f {
color: gold;
}
.my-class-g+.my-class-h {
color: wheat;
}
.my-class-i~.my-class-j {
color: darkviolet;
}
.my-class-k.my-class-l {
color: saddlebrown;
}
.my-class-m[title] {
color:orangered;
}
.my-class-m[title=value1] {
color:darkgreen;
}
.my-class-m[title~=hello] {
background:green;
}
.my-class-m[title|=value2] {
background:blue;
}
.my-class-m[title^=value3] {
background:red;
}
.my-class-m[title$=value4] {
background:pink;
}
.my-class-m[title*=value5] {
background:orange;
}
.my-class-n:first-child{
background-color:purple;
}
a:link {
color: gold;
}
a:visited {
color: wheat;
}
a:active {
color: darkviolet;
}
a:hover {
color: saddlebrown;
}
.my-class-o:focus{
border: 2px solid orangered;
}
.my-class-p:lang(zh) {
background: darkgreen;
}
.my-class-q button:enabled {
background: green;
}
.my-class-q button:disabled {
background: #ddd;
}
.my-class-r input:checked+span:after {
content: "I've been chosen.";
}
.my-class-s::selection {
background:green;
color:pink;
}
.my-class-t span:nth-child(2) {
color:blue;
}
.my-class-u span:nth-last-child(3) {
color:blue;
}
.my-class-v p:nth-of-type(2) {
color:blue;
}
.my-class-w p:nth-last-of-type(2) {
color:blue;
}
.my-class-x:last-child{
background-color:purple;
}
.my-class-y p:first-of-type{
background-color:purple;
}
.my-class-z p:last-of-type{
background-color:purple;
}
.my-class-aa span:only-child{
background-color:purple;
}
.my-class-bb span:only-of-type{
background-color:purple;
}
.my-class-cc:empty{
background-color:purple;
}
.my-class-dd span:not(.my-style) {
background-color:purple;
}
.my-class-ee:first-line {
background-color:purple;
}
.my-class-ff:first-letter {
background-color:purple;
}
.my-class-gg:before{
content: 'xutongbao:'
}
.my-class-hh:after{
content: 'xutongbao:'
}
</style>
</head>
<body>
<div style="color:yellow! important">! important</div>
<div style="color:red">style</div>
<div id="myId">#id</div>
<div class="my-class">.class</div>
<p>element</p>
<span>*</span>
<div class="my-class-a">E,F</div>
<div class="my-class-b">E,F</div>
<div class="my-class-c">
<div class="my-class-d">E F</div>
</div>
<div class="my-class-e">
<div class="my-class-f">E>F<span>Don't match</span></div>
</div>
<div class="my-class-g">Don't match</div>
<div class="my-class-h">E+F</div>
<span>Don't match</span>
<div>
<div class="my-class-i">Don't match</div>
<div class="my-class-j">E~F</div>
<div class="my-class-j">E~F</div>
<div class="my-class-j">E~F</div>
</div>
<div class="my-class-k my-class-l">.class1.class2</div>
<div class="my-class-m" title>E[attr]</div>
<div class="my-class-m" title="value1">E[attr=value]</div>
<div class="my-class-m" title="value1 hello my world">E[attr~=value]</div>
<div class="my-class-m" title="value2-hello-my-world">E[attr|=value]</div>
<div class="my-class-m" title="value3a">E[attr^=value]</div>
<div class="my-class-m" title="value3a">E[attr^=value]</div>
<div class="my-class-m" title="avalue4">E[attr$=value]</div>
<div class="my-class-m" title="bvalue4">E[attr$=value]</div>
<div class="my-class-m" title="bvalue5c">E[attr*=value]</div>
<div>
<p class="my-class-n">E:first-child, the paragraph is the first child of its parent element (div).</p>
<p class="my-class-n">This paragraph is not the first child of its parent element.</p>
</div>
<a href="http://www.baidu.com">E:link,E:visited,E:active,E:hover</a>
<input type="input" class="my-class-o" value="E:focus" style="display: block;">
<div lang="zh" class="my-class-p">E:lang(C)</div>
<div class="my-class-q">
<button>E:enabled</button>
<button disabled="true">E:disabled</button>
</div>
<div class="my-class-r">
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>blue</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>red</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>black</span></label></li>
</ul>
</div>
<p class="my-class-s">After you select the text, look at the text color and background color to see what :: Selection works.</p>
<div class="my-class-t">
<span>E:nth-child(n)</span><span>E:nth-child(n)</span><span>E:nth-child(n)</span>
</div>
<div class="my-class-u">
<span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span>
</div>
<div class="my-class-v">
<p>E:nth-of-type(n)</p><p>E:nth-of-type(n)</p>
<span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span>
</div>
<div class="my-class-w">
<p>E:nth-last-of-type(n)</p><p>E:nth-last-of-type(n)</p>
<span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span>
</div>
<div>
<p>last-child</p><p class="my-class-x">last-child</p>
</div>
<div class="my-class-y">
<span>first-of-type</span>
<p>first-of-type</p><p>first-of-type</p>
</div>
<div class="my-class-z">
<span>last-of-type</span>
<p>last-of-type</p><p>last-of-type</p>
</div>
<div class="my-class-aa">
<span>only-child</span>
</div>
<div class="my-class-bb">
<span>only-of-type</span>
</div>
<div class="my-class-cc" style="width: 100%; height: 20px;"></div>
<div class="my-class-dd"><span>E:not(selector)</span><span class="my-style">E:not(selector)</span><span>E:not(selector)</span></div>
<p class="my-class-ee" style="width: 10px;">E:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-line</p>
<p class="my-class-ff">Eg:first-letterE:first-letterE:first-letter</p>
<div class="my-class-gg">E:before</div>
<div class="my-class-hh">E:after</div>
</body>
</html>
Copy the code 
\
\
\
\
\
\
\
\
\
\
\
\
\