2 Css3选择器

* {
    text-decoration: none;
    color: #6c757d;
}

h1 {
	color: red;
}

h1,h2 {
    color: red;
}

h1,h2 {
    color: red;
}
h1,h3{
    background: #dcdcdc;
}

.text-center {
    text-align: center;
}
...

<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>

.help-block {
    background: red;
}

span.help-block {
    font-size: 12px;
    color: #aaa;
    background: none;
}
...

<span class="help-block">感谢访问后盾人</span>

#container {
    background: red;
}

...
<h1 id="container">houdunren.com</h1>

main article h2,main h1 {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

main article~* {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

h1[class] {
    color: red;
}
...

<h1 class="container">houdunren.com</h1>

h1[class][id] {
    color: red;
}
...

<h1 class="container" id >houdunren.com</h1>

a[href="https://www.houdunren.com"] {
    color: green;
}
...

<a href="https://www.houdunren.com">后盾人</a>
<a href="">HDCMS</a>

h2[name^="hdcms"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>

h2[name$="com"] {
    color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>

h2[name*="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="www.houdunren.com">hdcms.com</h2>

h2[name~="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren web">hdcms.com</h2>

h2[name|="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren-web">hdcms.com</h2>

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
...

<a href="https://www.houdunren.com">后盾人</a>

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
...

<input type="text">

div {
	height: 900px;
}

div:target {
	color: red;
}
...

<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">
	hdcms内容管理系统
</div>

:root {
    font-size: 100px;
}

:empty {
    border: solid 2px red;
}
...

<p></p>
<p> </p>

article span:first-child {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
		<span>hdcms.com</span>
	</aside>
</article>

article span:first-of-type {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<strong>hdcms.com</strong>
		<span>houdunwang.com</span>
	</aside>
</article>

article span:last-child {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
    <strong>hdcms.com</strong>
    <span>houdunwang.com</span>
  </aside>
  <span>hdphp.com</span>
</article>

article span:last-of-type {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
  <span>hdphp.com</span>
</article>

article span:only-child {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
	</aside>
</article>

article span:only-of-type {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
		<span>hdcms.com</span>
	</aside>
</article>

article span:nth-child(2) {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
    <span>houdunwang.com</span>
    <span>hdcms.com</span>
  </aside>
  <span>hdphp.com</span>
</article>

table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

因为：n=0,1,2,3...
所以：n+3=3,4,5,6...

table tr>td:nth-child(n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

table tr>td:nth-child(odd) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

table tr>td:nth-child(even) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

table tr>td:nth-last-child(2n+1){
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

main>ul li:nth-last-child(-n+2) {
	color: red;
}

article span:nth-last-of-type(1) {
    background: red;
    color: white;
}
...

<article>
  <aside>
  	<span>houdunren.com</span>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
	<span>hdphp.com</span>
</article>

ul li:not(:nth-child(1)) {
    color: red;
}
...

<ul>
  <li>houdunren.com</li>
  <li>hdcms.com</li>
  <li>后盾人</li>
</ul>

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>

input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc; 
	border: none;
}
...

<input type="text" name="title" required>
<input type="text" name="name">

input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
...

<form>
<input type="email">
<button>保存</button>
</form>

p::first-letter {
    color: red;
}
...

<p>
	后盾人不断更新视频教程
</p>

div {
    border: solid 1px #ddd;
    width: 150px;
}

div>input[type="text"] {
    border: none;
    outline: none;
}

div>input[type="text"]+span:after {
    content: "\21AA";
    font-size: 14px;
    cursor: pointer;
}
...

<div>
	<input type="text"><span></span>
</div>

h2::before {
	content: attr(title);
    color:red;
}
...

<h2 title="后盾人">houdunren.com</h2>