css选择器

元素选择器

div{...}
h1{...}

ID选择器

...html
<h1 id="title"></h1>
...css
#id{...}

类选择器

...html
<h1 class="title content"></h1>
...css
.title .content {...}

属性选择器

...html
<h1 mock="1"></h1>
<h1 mock="2"></h1>
<img src="..." alt="" >
<a herf="..." />
...css
h1[mock]{...}
h1[mock = 1]{...}
img(alt){...}
a(herf){...}

后代选择器

...html
<h1>
	<p></p>
	<span></span>
	<p></p>
	<p></p>
</h1>
...css
h1 span {...}  // h1中所有span
h1>span{...}   // h1的子元素span
span + p {...} // span的向下相邻兄弟元素
span ~ p {...} // span的向下所有兄弟元素

伪类选择器

...html
<a href="" alt="" />
<a><span><em></em></span></a>
<a><span></span><em></em></a>
<input type="checkbox" required />
<input type="email">
...css
a::before{...}
a::after{...}
a:link:hover visited{...} // UI状态伪类
span:frist-child{...} //匹配作为第一个子元素的span 同first-of-type,nth-child()
span:last-child{...} // 匹配作为最后一个子元素的span 同last-of-type,nth-last-child()
a em:only-child{...} // 匹配a元素下无兄弟元素的em
a em:only-of-type{...} // 匹配a元素下有兄弟元素的em
input[type="checkbox"]:checked{...} // UI状态伪类
input:required {...} // UI状态伪类，匹配必填项,optional匹配非必填
input[type="email"]:focus:invalid {...} // 有效伪类，匹配规则不通过
input[type="email"]:focus:valid {...} // 有效伪类，匹配规则不通过