标签选择器
div{ color:red; }
<div>a</div>
<div>b</div>
类选择器
.a{ color：pink;}
<div class="a">pink</div>
id选择器
#b {color：red; font-size:40px;}
<div id="b">blue</div>
并列选择器
div,.high{color:red;}
<div class="high">aaa</div>
复合选择器
div.high{color:red;}
<div class="high">bbb</div>
后代选择器
div p{color:red;}
<div>
<p> 123</p>
</div>
直接后代选择器
div>p{color:red;}
<div>
<p>1 //red
<p>test</p>
</p>
</div>
相邻兄弟选择器
div+p{color;red}
<div>
<p>1//red
<p> 1</p>
</p>
</div>
属性选择器
div[name][gender] {color:red;}
<div name="jack" gender="23"> test</div>
div{name="jack"}
伪类
<style>
div:hover { background-color; red; }
input:focus{outline: none
border:dashed yellow
;}
<div class="high">bbb</div>
后代选择器
div p{color:red;}
<div>
<p> 123</p>
</div>
直接后代选择器
div>p{color:red;}
<div>
<p>1 //red
<p>test</p>
</p>
</div>
相邻兄弟选择器
div+p{color;red}
<div>
<p>1//red
<p> 1</p>
</p>
</div>
属性选择器
div[name][gender] {color:red;}
<div name="jack" gender="23"> test</div>
div{name="jack"}
伪类
<style>
div:hover { background-color; red; }
input:focus{outline: none
border:dashed yellow
;}
