CSS里的a:active 是干什么用的,请举例说明

html-css024

CSS里的a:active 是干什么用的,请举例说明,第1张

定义链接在鼠标被激活(点下去)时候的样式。操作方法如下:

1、新建一个html文件,命名为test.html,a标签四个不同的伪类,有不同的效果。

2、利用a标签伪类改变字体的颜色。下面代码实现了a标签的默认颜色为红色,点击链接过后,颜色变为绿色,当鼠标放在连接上显示粉红色。

3、利用a标签伪类改变字体的大小。下面代码实现了a标签的默认大小为20px,点击链接过后,大小变为40px。

4、利用a标签伪类改变链接的背景颜色。下面代码实现了a标签的默认背景颜色为红色,点击链接过后,背景颜色变为绿色。

5、利用a标签伪类改变链接的字体。下面代码实现了a标签的默认字体为Monospace,点击链接过后,字体变为Arial。

6、最后利用a标签伪类去掉连接默认的下划线。下面代码实现了a标签在任何状态下都没有下划线。

linkvisitedhoveractive解释及正确顺序:

a:link 选择器设置指向普通的、未被访问页面的链接的样式

a:visited 选择器用于设置指向已被访问的页面的链接

a:active 选择器用于活动链接

a:hover 选择器用于选择鼠标指针浮动在上面的元素。

text-decoration 属性大多用于去掉链接中的下划线:

例如:a:link{text-decoration:none}看到别人总结的两点参考下记忆:

在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。

“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。

再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active

扩展资料:

css链接link时,链接可以使用任何css属性,包括字体.颜色.背景等等. 链接有四个状态,可在四个状态时设置不同的属性 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover -

当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后。

他们是CSS中不同的选择器!

1、#wrap{ ... ... }表示ID选择器(唯一选择)id 选择器以 "#" 来定义。

下面是id选择器实例

<html>

<head>

    <style>

        #red {color:red}

        #green {color:green}

    </style>

</head>

<body>

    <p id="red">这个段落是红色。</p>

    <p id="green">这个段落是绿色。</p>

</body>

</html>

2、.active   表示Class选择器(类选择器)在 CSS 中,类选择器以一个点号显示。

类选择器实例

<html>

<head>

    <style>

        .red {color:red}

    </style>

</head>

<body>

    <p class="red">这个段落是红色。</p>

    <p class="red">这个段落也是红色。</p>

</body>

</html>

a:visited{ ...  ... }  表示伪类选择器,在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

伪类选择器实例:

<html>

<head>

  <style>

   a:link {color: #FF0000}/* 未访问的链接 */

   a:visited {color: #00FF00}/* 已访问的链接 */

   a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

   a:active {color: #0000FF}/* 选定的链接 */

  </style>

</head>

<body>

    <a href="zhidao.baidu.com">百度知道</a>

</body>

</html>

XXX { ...  ... }  表示元素选择器,最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身

元素选择器实例:

<html>

<head>

  <style>

   h1{color:red}

   h2{color:green}

  </style>

</head>

<body>

    <h1>百度知道</h1>

    <h2>百度知道</h2>

</body>

</html>