CSS选择器

一、css选择器

1.id选择器

语法：<标记 id="id名"></标记>
          
          #id名{属性:属性值;}

eg:   <h1 id="qfEduTit">孙悟空</h1>

        #qfEduTit{color:red;}

注：a) id名命名要语义化，不能使用中文，数字，或以数字开头，敏感词，关键词

       常见命名方法：驼峰命名法：qfEduTit    
                             下划线连接命名法： qf_edu_tit

      b)id名是唯一的，不能出现同名的id（id选择器的优先级较高）

2.class选择器(类选择器)

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

          .类名{属性:属性值;}

eg:    <h1 class="qfTit">孙悟空</h1>

         .qfTit{color:red;}

注：  a) 可以给具有相同样式的元素添加相同的class名

         b) 当某个元素既具有与其他元素相同的样式，又具有与其他元素不同的样式时，就要用到类名词列表用法，即：

eg:   <h1 class="qfEduTit  xaEdu">猪八戒</h1>
        <h1 class="qfEduTit">孙悟空</h1>
        .qfEduTit{color:red;}
        .xaEdu{font-size:30px;}

3.标签选择器(元素选择符或类型选择符)

语法： 标记名称{属性:属性值;}

eg:   h1{color:red;}

4.后代选择器（包含选择器）

语法：选择符1   选择符2{属性:属性值;}

eg:   ul  li{color:red;}

注：使用后代选择器的前提是选择符1和选择符2必须是包含与被包含的关系

5.群组选择器

语法： 选择符1,选择符2,选择符3{属性:属性值;}

eg:  h1,h2,h3,h4,h5,h6,strong,b{font-weight:normal;}

6.通用选择器（通配符）

语法： *{属性:属性值;}

eg:  *{margin:0;padding:0;}

注：*匹配html根元素以及根元素下所有的标签元素

7.伪类选择器

语法：  选择符:hover{属性:属性值;}

注：超链接的四个状态，按照顺序依次为：

a) a:link    超链接的初始状态（链接没有被访问过时的状态）

b) a:visited   链接被访问过后的状态

c) a:hover    鼠标滑过时的状态

d) a:active   鼠标按下时的状态(超链接被激活时的状态)

注：记忆方法：爱恨原则

L o V e     H A t e

注：为了简化，我们通常这样写a的样式：

a{color:red;}  a:hover{color:blue;}

二、css权重问题

当两个不同的选择器对同一个元素设置相同的样式发生冲突时，优先采用权重较高的样式。

我们把选择器的权重分为以下四个等级：

1）第一等级：内联样式    <h1 style="color:red;"></h1>   权重：1000

2）第二等级：id选择器   权重：0100

3）第三等级：class选择器，伪类选择器，属性选择器   权重：0010

4）第四等级： 标签选择器，伪元素选择器   权重：0001

注：a）后代选择器权重：所有选择器权重之和

      b）群组选择器权重：各个选择器自身的权重

      c）当选择器权重相同时，取后面定义的样式

★ css层叠的含义

层叠指的是样式的优先级，当产生冲突时以优先级高的为准
 
1. 内联样式>内部样式>外部样式（除非使用!important标记 ）
2. id选择符>类选择符>元素选择符
3. 权重相同时取后面定义的样式