其他选择器
1,群组选择器
多个选择器应用同一组样式,多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2,全局选择器
*{} 对所有html元素有效
3,后代选择器
标签1 标签2{}
选择器 标签2{}
控制标签1下面的标签2的样式。(对标签1下面的其他标签不影响)
4,属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5,伪类选择器
超链接有四种状态,不同状态下的样式怎么设置?
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接(点击鼠标不松开) */
和CSS类搭配
.red : visited {color: #FF0000}
注意1:
link和visited时候超链接的伪类
hover和active不止可以对超链接使用,别的html元素也可以
注意2:
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类(选择元素的第一个子元素)
使用F12工具查看网页指定部分的代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/* a{
color:green;
} */
a:link{
color:yellow;
}
a:visited{
color:burlywood;
}
a:hover{
color:red;
font-size:30px;
}
a:active{
color:#008000;
font-size:10px;
}
.one:link{
color:blue;
font-size:12px;
}
.one:visited{
color:pink;
font-size:10px;
}
img:hover{
width:300px;
}
img:active{
width:200px;
}
/* div:first-child{
color:blue;
}
span:first-child{
color:green;
} */
.one{
color:blue;
}
</style>
</head>
<body>
<div>我是body的第1个孩子</div>
<!-- 1,正常状态;2,鼠标移上;3,鼠标按下,不抬起;4,被点击过,被打开过 -->
<a href="https://www.baidu.com">GoTo百度</a>
<a href="http://www.sikiedu.com" class="one">SiKi学院</a>
<a href="https://www.taobao.com">淘宝</a>
<img src="img/640.jpg" />
<div class="one">
<span>我是第1个孩子
<span>我是第1个孙子</span>
</span>
<span>我是第2个孩子</span>
</div>
</body>
</html>