a元素的几种伪类选择器

a元素的几种伪类选择器

1.默认选中状态link

a.语法

a:link{
    /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

b.源代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         /* 如果不设置的话,默认就是蓝色文字,蓝色下划线 */
         a:link{
            /* 设置默认未选中时超链接里面的文字颜色为red(红色) 
            */
           color: red;
           /* 消除下划线 */
           text-decoration: none;
         }
    style>    
head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!a>
body>
html>

c.展示效果

a元素的几种伪类选择器_第1张图片

2.悬停状态hover

a.语法

a:hover{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

b.源代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:hover{
           color: skyblue;
           /* 消除下划线 */
           text-decoration: none;
         }
    style>    
head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!a>
body>
html>

c.展示效果(鼠标悬停时的状态)

a元素的几种伪类选择器_第2张图片

3.正在点击状态active

a.语法

a:active{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

b.源代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:active{
           color: pink;
           /* 消除下划线 */
           text-decoration: none;
         }
    style>    
head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!a>
body>
html>

c.展示效果

a元素的几种伪类选择器_第3张图片

4.点击后状态visited

a.语法

a:visited{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

b.源代码

/*
a:visited存在漏洞,黑客可以通过判断下划线是否被去掉来判断用户访问了哪些网站
这是会造成信息的泄露的,因此浏览器限制了visited里面是不能更改浏览器的下划线的!!!
*/
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:visited{
           color: green;
           /* 消除下划线,无效,因为浏览器有限制*/
           text-decoration: none;
         }
    style>    
head>
<body>
   <a href="https://www.baidu.com">成功不会辜负日复一日的坚持的!!!a>
body>
html>

c.展示效果

a元素的几种伪类选择器_第4张图片

5.写在一个css中的书写顺序

a.语法

遵循LVHA的顺序(首字母)

a:link{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:visited{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:hover{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:active{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

b.源代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:link{
           color: black;
           /* 消除下划线 */
           text-decoration: none;
         }
         a:visited{
           color: green;
           /* 消除下划线,无效,因为浏览器有限制*/
           text-decoration: none;
         }
         a:hover{
           color: gray;
           text-decoration: none;
         }
         a:active{
           color: blueviolet;
           text-decoration: none;
         }
    style>    
head>
<body>
   <a href="https://www.baidu.com">成功不会辜负日复一日的坚持的!!!a>
body>
html>

c.展示效果

link时的状态

a元素的几种伪类选择器_第5张图片

visited时的状态

a元素的几种伪类选择器_第6张图片

hover时的状态

a元素的几种伪类选择器_第7张图片

active时的状态

a元素的几种伪类选择器_第8张图片

你可能感兴趣的:(java,web基础知识,前端,css,a标签,伪类选择器,visited设置下划线无效)