【前端学习之路——CSS】03选择器(class选择器、css选择器、a标签伪类选择器)

7、id选择器

<style type="text/css">
    #id_name{
        font-size:20px;
    }
</style>

8、class选择器

一个元素可以设置多个class，中间用空格隔开

class = “hello p”

<style type="text/css">
    .id_name{
        font-size:20px;
    }
</style>

id选择器在当前页面是唯一的，而class可以重复

class属性值相同的称为一组元素，可以同时为一组元素设置样式

---

9、css选择器

1、分组选择器（并集选择器）

如果为多个元素，设置多个相同的样式，可以使用选择器分组设置

语法：

选择器1，选择器2，选择器3{

}

**2、复合选择器（交集选择器） **

（因为id选择器已经可以唯一确定某个元素，因此对id选择器不建议使用复合选择器）

语法：

选择器1选择器2{

}

3、通配选择器：*

选中页面中所有的元素

语法：

*{

}

4、后代元素选择器（爷父子）

语法：（选中的是父元素下的子元素）

父元素 子元素{

}

语法：（选中的是指定的子元素）

爷元素 父元素 子元素{

}

若有多个诸如此类的父子元素，可以为父元素加上id，

语法：（为指定的父元素的子元素设置样式）

#id_name 子元素{

}

当为父元素的子元素1设置样式表时，如果另外一个子元素2的子元素也有与子元素1相同的元素

可按如下语法：（只选择该父元素下的子元素）但IE6及以下的浏览器不支持

父元素>子元素{

}

---

10、a标签伪类选择器 ：link、visited、hover、active

（hover和active不仅能给a绑定，也能与其他标签绑定，但仅IE6以上的才支持为a标签以外的其他标签设置）

1、link：设置链接的样式

语法：

a:link{
    color:violet;
    font-size:25px;
}
<a href="www.baidu123.com">新链接</a>

效果图：

2、visited：设置链接访问前和访问后样式的变化

<style type = "text/css">
    a:link{  /*设置未访问过的链接的样式*/
        color:purple;
        font-size:20px;
    }
    a:visited{  /*设置已访问过的链接的样式*/
        color:red;
    }
</style>
<a href = "https://www.baidu.com">这个是百度的链接</a>
<a href = "https://www.google.com">这个是谷歌的链接</a>

执行效果图：

同时，因为浏览器是通过历史记录来判断该链接是否访问过，涉及到用户的隐私，因此visited伪类的样式，只能设置颜色。

3、hover：设置鼠标划过链接的样式变化

<style type = "text/css">
    a:hover{/*鼠标经过链接时样式的变化*/
        color:blue;
    }
</style>
<a href = "https://www.baidu.com">这个是百度的链接</a>
<a href = "https://www.google.com">这个是谷歌的链接</a>

原始图：

鼠标滑过效果图：（颜色变为蓝色）

4、active：设置鼠标点击链接时的样式变化

<style type = "text/css">
    a:active{/*鼠标点击链接时样式的变化*/
        color:gray;
    }
</style>
<a href = "https://www.baidu.com">这个是百度的链接</a>
<a href = "https://www.google.com">这个是谷歌的链接</a>

效果图：

5、注意事项（LVHA）

因为伪类之间也有顺序，所以a的选择器顺序最好是按照上述顺序来进行，否则有的样式可能会失效。