css选择器分类与优先级

1.标签选择器

 即用标签开头，如body{background-color:black;}

2.class选择器

如<div class="box"></div>; .box{ width:100%, font-size 14px;}

备注：class不唯一，多个标签可同时使用同一个class属性；但如果想要专属，则需要  标签.class名{}，如div.box{ color:red;}

3.id选择器

类似class选择器，但是id属性唯一，多个标签的id 不能相同。

  <div id="box"></div> #box{ width:100%}

4.后代选择器：即给标签里面的标签给与样式，比如给div里的a标签属性； （也属于class选择器）

  <div class="box">

     <a href="">第一个a标签</a>

      <ul>

         <li><a href=""> 第二个a标签</a></li>

      </ul>

 </div>

    （1）选择特定a标签

            第一个a标签：.box>a{}

            第二个a标签：.box>ul>li>a{}

      (2)选择所有的a标签

           .box a{}

5.兄弟选择器：即给标签后面的兄弟（只能是后面）给与样式

    <div class=".wrap"></div>

   <p>first brother</p>

   <p>second brother</p>

 (1).只能选择相邻的兄弟

     .wrap+p{}  /* first brother*/

 (2)全选

   .wrap~p{}

6.交集选择器

<p class="pp">第一个pp</p>

<a  class="pp" href="">第二个pp</a>

<span class="pp">第三个pp</span>   

p.pp{} :第一个pp

a.pp{}:第二个pp

span.pp{}:第三个pp

7.通配符：使用于所有标签

*{

     margin:0;

     padding:0

} 

8.群组选择器:选择多个class设置共同样式

.p1, .p2, .p3{}

9.伪类选择器

a:link{ }a标签连接不上时的属性

a:visited{} a标签连接上时的属性

标签：hover{}鼠标悬浮在该标签上时的样式

标签：active{} 鼠标点击下去的样式

标签：first-cild{}标签第一个孩子的样式

标签：last-child{}标签最后一个孩子的样式

标签：nth-child(n){}标签第n个孩子的样式

标签::before{}在该标签前加上内容【p::before{content:"在p标签前加内容"}】

标签::after{}类似于before，只是在标签后面添加内容

10.优先级：通配符<标签选择器<class选择器<id选择器<style属性