CSS选择器知识点

选择器

一、作用：规范页面中哪些元素能够使用定义好的样式，匹配页面元素

二、详解

1、通用选择器

作用：匹配页面所有的元素

语法： *{}                                                         

2、元素选择器

作用： 匹配 页面中指定的元素的元素

语法：元素名{}

 例：div{}   p{}     h1{}   span{}

3、类选择器

作用：允许元素使用附带的class属性进行引用

语法：.类名{}

注意：不能以数字开始

  i、多类选择器

  作用：允许一个元素 引用 多个类选择器

  语法：<标记class="类名1 类名2"></标记>

  ii、分类选择器

  作用：将类选择器和元素选择器结合使用，以便实现对某种元素中不同样式的细分控制

  语法：元素选择器.类选择器{}

   .redBack{}//匹配页面中所有class 为 redBack 的元素

   div.redBack{}//匹配页面中所有class为redBack的div元素

4、id选择器

作用:只匹配页面指定id值得元素

语法:#idValue{}

5、群组选择器

 声明时，以 逗号 隔开的选择器列表

语法:选择器1,选择器2,选择器3,..{ }

6、后代选择器

作用: 根据元素间的后代(出现在该元素中的所有元素)关系来匹配元素

语法:选择器1 选择器2{}

7、子代选择器

作用:根据元素间的子代(一层层级关系)关系来匹配元素

语法:选择器1>选择器2{}

 8、伪类选择器

作用:匹配元素不同状态时的样式

分类

链接伪类、动态伪类、目标伪类、元素状态伪类、构伪类、否定伪类

语法：  :伪类{}

选择器:伪类选择器{}

  1、链接伪类

      i、:link 适用于尚未访问的超链接

      ii、visited 适用于访问过的超链接

2、动态伪类

      i、:hover 适用于鼠标悬停在HTML元素时

      ii、:active 适用于元素被激活时的状态

      iii、:focus 适用于html元素获取焦点时的状态

三、优先级

选择器是通过权值表示优先级

       元素选择器       1

       类选择器         10

       伪类选择器       10

       ID选择器         100

       内联样式         1000

 选择器冲突时，将权值加到一起，大的优先。权值相同时，后定义优先