css基础选择器

1、别名:标签选择器、标记选择器

特点：通过元素名称作为选择器名称

作用：修改某一元素的默认样式 body{} h1{} h2{}

2、类选择器(类样式)

特点：通过元素的 class 属性来进行引用

作用：定义某一组标签的统一样式

语法：.className{color:red;bakcground:yellow;}

注意：className不能以数字开头

引用：<div class="className"></div> <h3 class="className"></h3>

注意：在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开 例如 <div class=“myDiv firstDiv”> 我是div</div>

3、分类选择器

由类选择器衍生出来的新选择器 将类选择器 与 元素选择器 结合使用

目的：为了更精准的定位的页面的元素

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

例如： p.content{}

4、通用选择器

作用：适配页面上所用的元素，改变他们的样式

语法：*{}

5、id选择器(id样式)

作用：通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。

语法：#id{} eg : #top{background-color:red;} <div id="top"></div> id的

作用： 1、定义元素在页面中的唯一标识 2、引用样式表中的id样式

6、群组选择器

选择器声明是以 , 隔开的 选择器列表

作用：定义一组元素的样式 h3,p,.new,#test,div.newDiv,p.test{}

7、后代选择器

根据元素的嵌套关系来定义的样式 根据一个元素 去定位 它里面的其他元素

语法： selector1 selector2{}

<div>

 　　<div>

　　　　<p>

　　　　　　<span></span>

　　　　 </p>

　　 </div>

　　<span></span>

</div>

8、子代选择器

要求选择器之间只能存在父子关系

语法: selector1>selector2 #test>.news{ 修改 id为test里面的 class为news的元素 }

后代选择器 和 子代选择器 目的是为了精确匹配范围

9、伪类选择器

匹配元素 不同状态时候的选择器

语法：selector1:伪类选择器 伪类选择器

分类：

1、链接伪类

:link : 适用于尚未访问的链接，与:visited互斥

:visited : 适用于已访问过的超链接，与:link相斥

2、动态伪类

:hover : 适用于鼠标悬停在元素上面时候的状态

:active : 元素被激活的一瞬间的状态

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

注意： 需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效， :active必须位于:hover之后才能生效