选择器类型

标签选择器

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 ;}