CSS 选择器 鼠标经过链接样式变化

发布时间:2020-07-11编辑:脚本学堂
本文介绍了css选择器的用法,css鼠标经过样式变化的例子,有需要的朋友参考下。

a  设置链接css样式
a:hover  设置鼠标经过css样式
例如:“百度”该链接,本没有下划线;字体颜色为黑色;字号12px。

设置该链接,鼠标经过时,显示下划线;字体颜色设置为蓝色,字号增加一倍24px。
 

复制代码 代码示例:
<html>
<head>
<style type="text/css">
a{
font-size:12px;
color:#000000;
text-decoration:none;
}
a:hover{
font-size:24px;
color:Blue;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

这只是CSS选择器中的一种,css还提供了其他的选择器。详细请查看:http://www.jb200.com/w3school/css/css_syntax_04.html

小结:
CSS提供的这些选择器,单一的情况,还比较好区分,但是多者结合,未免给初接触CSS的童鞋带来迷惑。比如:
>后代选择器  与  元素选择器+类选择器结合使用,这两者一定要区分清楚,到底是后代选择器,还是元素选择器+类选择器的结合使用。
>后代选择器  与  多类选择器,这两者一定要区分清楚,到底是后代选择器,还是多类选择器。
>CSS后代选择器(空格)、CSS子元素选择器(>)、CSS相邻兄弟选择器(+),这三者比较相近,但是有着选择范围上的区别,一定要分清。

例子:
选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从table 元素继承,该 table 元素有一个包含 company 的 class 属性。
table.company td > p