选择器

选择器作用：选择特定的HTML页面元素

基础选择器：

1、标签选择器：用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定特定的css样式。

语法：

标签选择器 { 

        属性1：属性值1；

        属性2：属性值2；

}

2、类选择器：用.类名作为选择器

语法：

.类名 {

        属性1：属性值1；

        属性2：属性值2；

}

标签 <p class="类名"></p>

3、id选择器：用id名作为选择器

语法：

#id {

        属性1：属性值1；

        属性2：属性值2；

}

标签<p  id="id名"></p>

***类选择器与id选择器的区别：

类选择器可以有多个类名，而id只有一个id名

多个类名之间用空格隔开

<div class="pink fontWeight  font20"></div>

4、通配符选择器：*选择页面上所有的标签，能匹配页面中所有的元素

语法：

* {

        属性1：属性值1；

        属性2：属性值2；

}

复合选择器

1、后代选择器（包含选择器）：用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

语法：

父代 子代 {

       属性1：属性值1；

        属性2：属性值2；

}

如  .class h3{color:red;font-size:16px;}

2、子代选择器：只能选择最近一级的元素

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

语法：

父代>子代 {

属性1：属性值1；

        属性2：属性值2；

}

如    .class>h3{color:red;font-size:14px;}

3、交集选择器：选择两个标签交集的部分

如p.one{属性：属性值；}

标签：<p class="one"></p>

4、并集选择器：如果两个标签样式相同，可以利用并集选择器，减少代码

写法：两个标签之间用，隔开通常用于集体声明。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

链接伪类选择器

a：link  未访问的 链接

a：visited   已访问过的链接

a：hover  鼠标移动到链接上

a：active  选定的链接

写的时候，他们的顺序不要颠倒 按照 lvha 的顺序。否则可能引起错误。

因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover

因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a { /* a是标签选择器 所有的链接 */

        font-weight: 700;

        font-size: 16px;

        color: gray;

}

a:hover {  /* :hover 是链接伪类选择器 鼠标经过 */

        color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */

}