关于CSS选择器基础知识---重点

1，CSS选择器

• 作用：
  规范了页面有哪些元素能够使用声明好的样式。
  目的：为了匹配页面的元素。

• 选择器详情：

• 1.元素选择器

  特点：由标记名称作为选择器。主要匹配页面中指定的标记所对应的所有元素。
  语法：    
  

标记{
属性：值；
属性2：值2；
。。。
}

• 2.类选择器

  特点：允许被任意元素所引用的选择器
  语法：
  1.声明
  .类名{
  属性：值；
  。。。
  }
  2.引用
  <标记 class=‘类名字’>（引用不用加.）

特殊用法：
1.分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素的不同样式的细分控制。
语法：

元素选择器.类选择器{
属性：值；
。。。
}

ex:
.

a{
类选择器，匹配所有的class为a的元素
}
div{
元素选择器，匹配所有div元素
}
div.a{
匹配class为a的div元素
}

2.多类选择器的使用方式，
允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开。

   .c1{...}
   .c2{...}
   .c3{...}
   <标记 class="c1 c2 c3">
  

3.伪类选择器
1.作用
匹配元素不同状态的选择器
ex：超链接a元素，具备四个状态
状态1：连接未被访问是的状态
状态2：鼠标悬停在元素上的状态
状态3:当元素被激活时
状态4:当访问过后的时候。
2.语法
:伪类状态
通常会配合其他元素一起使用。
选择器：伪类状态{。。。}
选择器：匹配元素
：伪类状态：匹配状态。
1、连接伪类
1、：link
匹配超连接未被匹配的状态。
2.：visited
匹配超链接打开后的状态。
2、动态伪类
1.：hover
匹配悬停在元素上边的状态。
2.：active
匹配元素被激活时候的状态。
3.：focus
匹配获取焦点时候的状态。
（文本框和密码框使用居多）
4.id选择器
1、ID的作用
在HTML中，每个元素都允许设置一个ID属性，主要用于表示该元素在网页中独一无二的标识。

2.ID选择器 为了匹配页面中指定ID的值的元素。 语法：

    #ID值{属性：值；}
   EX:
    #main{
     color:red;
    }
 5.

群组 选择器
1.作用
定义多个选择器的共同样式
定义方式是一个以,隔开的选择器列表。
2.语法

   #main,p,div.span,.redColor{
    color:red;
   }
 

等同于：

   #main{color:red;}
   p{color:red;}
   div.span{color:red;}
   .redColor{color:red;}
 

6.后代选择器
1.作用
依托于原色的后代关系来匹配元素（不限制层级）
2.语法

选择器1 选择器2{。。。}

7.子代选择器
1.作用
依托于元素的子代关系来匹配元素（是由一层关系）
2.语法

选择器1>选择器2{。。。}

3.选择器的优先级
当多个选择器能够同时应用到统一元素上时候，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式。

选择器的优先级看 "权值"

 选择器    取值
 元素选择器       1
 类/伪类          10
 ID选择器         100
 内联方式         1000