标签选择器

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

;}