標(biāo)簽選擇器
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>
復(fù)合選擇器
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
;}
