2018-08-14 HTML学习CSS选择器与伪类选择器
2018-08-14 本文已影响0人
随雪而世
选择器
<style type="text/css">
1. 元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
例:所有a标签
a{
background-color: yellow;
}
2.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
例:id为a1的标签
#a1{
/*color:#ff0000;*/
color:rgba(0,0,255,0.4)
}
3.class选择器：.class属性值
每个标签都有一个class属性，
例:所有class为.c1的标签
.c1{
color: brown;
background-color: olive;
}
4.通配符：*
选中所有的标签
*{
font-size: 50px;
}
5.层级选择器：选择器1 选择器2...
例:id为all_a的所有a标签
#all_a a{
color: pink;
}
满足div层下的div层下的a标签
div div a{
text-decoration: none;
}
6.群组选择器：选择器1，选择器，....
例:同时选中所有h1标签和所有的span标签
h1,span{
background-color: #FFC0CB;
}
伪类选择器
伪类选择器: 选择器:状态
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态
visited: 超链接访问后的状态 --- 已经访问成功后的状态
hover: 鼠标悬停在标签上对应的状态
active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)
LoVe HAte
例子:a标签使用伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
}
a:active{
color: darkblue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
a标签为黑色,从未浏览过的a标签为绿色,浏览过的a标签为粉红色,鼠标悬停在a标签上为红色,鼠标按下是a标签变为暗蓝色,松开鼠标恢复成变色前.
