`
deng131
  • 浏览: 673551 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS中<a>标签伪类顺序

阅读更多
<!DOCTYPE html>
<style type="text/css">
a:link{color:black;}
a:visited{color:blue;}
a:hover{color:red;}
a:active{color:green;}
</style>
<a href="#"> content </a>

根据CSS就近原则,从底往向上顺序查找,一直找到满足条件的定义为止。
A标签的4个伪类:
  1. ':link'    :适用于未被访问的链接;
  2. ':visited' :适用于已经访问过的链接;
  3. ':hover'   :鼠标指针指向一个元素,还未激活;
  4. ':active'  :适用于一个元素被选择但未被释放;


W3C制定的CSS21规范中指出:四个伪类的声明顺序应该是:':link'、':visited'、':hover'、':active'。 A:hover必须放置在A:link和A:visited之后,否则将隐藏A:hover内定义的相同规则。同理,A:active应在A:hover 之后,否则A:active中的相同规则将被隐藏。原因应该就在于浏览器解释CSS时遵循的“就近原则”。

推荐大家以后按照 L-V-H-A 的顺序来定义 <a> 标签的伪类样式。这样在各个浏览器里就都一样了。可以记这两个词:LOVE--HATE。

参考:
http://topic.csdn.net/u/20100630/14/7223adb9-3d4b-4869-9eaa-a424badeaeac.html
分享到:
评论

相关推荐

    css样式应用优先级实用PPT课件.pptx

    } &lt;div&gt;&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;&lt;div&gt;&lt;em&gt;&lt;/em&gt;&lt;/div&gt;。 子选择器用于选择所有子元素。例如:div &gt; span { display:none;} &lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;em&gt;&lt;span&gt;&lt;/span&gt;&lt;/em&gt;&lt;/div&gt;。 相邻...

    HTML+CSS.docx

    此外,还会讲解如何创建标题(&lt;h1&gt;至&lt;h6&gt;)、段落(&lt;p&gt;)、超链接(&lt;a&gt;)以及图像(&lt;img&gt;)等元素。 进入HTML标签的学习,你会发现它包含了大量的元素,每个元素都有特定的用途。例如,表格(&lt;table&gt;)相关的标签如...

    Css 导航 中英文

    在HTML中,我们可以使用`&lt;nav&gt;`标签来定义导航区域,而`&lt;ul&gt;`和`&lt;li&gt;`元素则用于创建无序列表,代表各个导航项。 ```html &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a...

    html css样例

    2. **内部样式**:将CSS写入`&lt;style&gt;`标签内,位于`&lt;head&gt;`中,适用于小规模项目。 3. **外部样式**:创建`.css`文件,通过`&lt;link&gt;`标签引入,方便重用和管理样式。 4. **CSS预处理器**:如Sass、Less,提供变量、...

    300道HTML、CSS习题及面试题(含答案)

    - 常见的HTML标签有:`&lt;p&gt;`(段落)、`&lt;a&gt;`(链接)、`&lt;img&gt;`(图像)、`&lt;h1&gt;`到`&lt;h6&gt;`(标题)等。 2. CSS基础知识: - CSS的作用是什么?CSS(层叠样式表)用于控制网页的布局和外观。 - CSS选择器有哪些?如...

    li轮换嵌套

    比如,可以利用CSS的`:hover`伪类改变鼠标悬停在`&lt;li&gt;`元素上时的旋转角度,以实现动态效果: ```css li { transition: transform 0.3s; /* 添加过渡效果 */ } li:hover { transform: rotate(45deg); /* 鼠标...

    脑动力 HTML+CSS标签速查效率手册(源码)

    11. `&lt;a&gt;`:创建超链接。 12. `&lt;img&gt;`:插入图像。 13. `&lt;input&gt;`:用于用户输入,支持多种类型如文本、密码、复选框等。 14. `&lt;form&gt;`:定义表单,用于用户输入数据。 15. `&lt;label&gt;`:与`&lt;input&gt;`关联,为用户提供...

    跟我学HTML+CSS答案

    &lt;a href="#section1"&gt;跳转到页面顶部&lt;/a&gt; &lt;div id="section1"&gt;这里是页面顶部&lt;/div&gt; ``` ### 第7章:表格布局与单元格属性 #### 单元格属性 - `colspan`: 设置单元格跨多列。 - `rowspan`: 设置单元格跨多行。 ##...

    h5day1.docx

    HTML5中的标签是构建网页的基础元素,它们被包含在尖括号`&lt;&gt;`之中。为了保持文档的完整性和逻辑性,大部分标签需要进行闭合。标签的闭合方式主要分为两大类: 1. **单标签闭合(自闭合)**:这种标签不需要额外的...

    HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.pdf

    `&lt;a&gt;`标签不仅可以链接到其他网页,还可以链接到页面内的特定位置。此外,HTML5引入了`&lt;nav&gt;`标签,专门用于创建页面导航部分,使得页面结构更加语义化。 对于图像超链接,我们可以使用`&lt;img&gt;`标签配合`usemap`属性...

    html和css知识点总结.docx

    `&lt;a&gt;` 标签用于创建超链接,`&lt;img&gt;` 用于插入图像,`&lt;table&gt;` 用于创建表格。`&lt;meta&gt;` 标签则用于提供元数据,比如设置关键词、描述以及页面刷新等。此外,还有一些语义化的标签,如 `&lt;header&gt;`、`&lt;main&gt;`、`&lt;footer...

    HTML+CSS思维导图

    - 属性:标签可以包含属性,提供额外信息,如`src`(在`&lt;img&gt;`标签中指定图像源)和`href`(在`&lt;a&gt;`标签中定义链接地址)。 2. HTML5新特性: - 新增元素:HTML5引入了新的语义化元素,如`&lt;header&gt;`、`&lt;footer&gt;`...

    网页开发复习资料

    - **链接标签`&lt;a&gt;`**:创建超链接,属性`href`用于指定链接目标的URL。 - **列表标签**: - `&lt;ul&gt;`:无序列表。 - `&lt;ol&gt;`:有序列表。 - `&lt;li&gt;`:列表项。 - `type`属性定义列表项目的符号样式(实心圆、空心圆...

    HTML基础语法

    - 外部样式表:单独的CSS文件,通过`&lt;link&gt;`标签引用。 示例代码: ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; h1 { color: red; font-family: Arial; } .button { color: blue; font-size: 18px; }...

    HTML+CSS仿BOSS直聘官网个别页面

    3. **链接与图像**:`&lt;a&gt;`标签创建超链接,`&lt;img&gt;`引入图片,需指定`src`属性指向图像源。 4. **列表**:`&lt;ul&gt;`和`&lt;ol&gt;`分别表示无序和有序列表,`&lt;li&gt;`定义列表项。 5. **布局元素**:`&lt;div&gt;`是布局容器,常用于...

    HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx

    在该文件夹中,创建一个名为“0501.html”的网页,并在网页中插入HTML结构,如`&lt;header&gt;`、`&lt;section&gt;`和`&lt;a&gt;`标签,同时定义相应的文字内容。然后,通过编写CSS来实现超链接的样式设置,包括但不限于颜色、装饰、...

    学习web前端开发html必备的开发文档

    - 内部样式:在`&lt;head&gt;`中使用`&lt;style&gt;`标签定义样式。 - 内联样式:直接在HTML标签中使用`style`属性定义样式。 - **选择器分类**: - 元素选择器:通过标签名选择元素。 - 类选择器:通过`.`前缀选择具有特定...

    级联样式表CSS学习笔记

    - 在`&lt;head&gt;`部分使用`&lt;style&gt;`标签来定义CSS规则。 - 示例: ```html &lt;style type="text/css" media="screen,projection"&gt; p { font-size: 20pt; color: blue; font-family: "Arial"; list-style-type: ...

Global site tag (gtag.js) - Google Analytics