200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > CSS复合选择器之链接伪类选择器及总结

CSS复合选择器之链接伪类选择器及总结

时间:2022-01-17 11:07:10

相关推荐

CSS复合选择器之链接伪类选择器及总结

在某些大型购物网站、新闻网站中可以看到许许多多的链接,其中很多链接的样式都为黑色,当鼠标放到某一链接上的时候,链接的颜色也会变化,点击过后颜色也会变化。这就用到了CSS复合选择器中的链接伪类选择器。

定义:伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊的效果,或者选择第1个,第n个元素。

1.用冒号(:)表示,比如:hover. :first-child.

<style>/* 1.未访问的链接 a:link 把未访问过(未点过的)的链接选出来 */a:link {color: #333;text-decoration: none;}/* 2. a:visited 选择点击过的(访问过的)链接 */a:visited {color: orange;}/* 3. a:hover 选择鼠标经过的那个链接 使其变颜色 */a:hover {color: skyblue;}/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green;}/* 为了确保生效,请按照 LVHA 的循顺序声明 :link - :visited - :hover - :active. */</style></head><body><a href="#">小猪佩奇</a><br><a href="">未访问的链接</a></body>

2. 链接伪类选择器写法

<style>body {color: red;}a {color: #333;text-decoration: none;}a:hover {color: #369;text-decoration: none;}</style></head><body><a href="#">小猪佩奇</a><br><a href="">未访问的链接</a></body>

*复合选择器总结

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。