`
conkeyn
  • 浏览: 1525145 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>伪类和伪元素 P57

    博客分类：
  • CSS
浏览器XHTMLCSSHTMLWeb 
阅读更多

利用伪类选择器和伪元素选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻像类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

伪类名 描述
:link 指示作为超链接（即有一个href属性）并指向一个示访问地址的所有锚。注意，有些浏览器可能会不正地将:link解释为指向任何超链接，包括已访问和未访问的超链接。
:visited 指示作为已访问地址超链接的所有锚。

 

 

 

 

 

 

 

动态伪类：


伪类名称 描述
:focus 指示当前用有输入焦点的元素，也就是说，可以接受键般输入或者能以某种方式激活的元素。
:hover 指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接。
:active 指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。

 

 

 

 

 

 

 

 

 

类似于:link和:visited，这些伪类最常用于超链的上下文中。很多web页面都有类似的样式：

a:link{color:navy}

a:visited{color:gray}

a:hover{color:red}

a:active{color:yellow}

前两个规则使用静态伪类，后两个利用动态伪类。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接伪类</title>
<style type="text/css">
/* unvisited links are blue*/
a:link{
	color:blue;
}
/* visited links are purple*/
a:visited{
	color:purple;
}
input:focus{
	background:silver;
	font-weight:bold;
}
textarea:focus{
	background:silver;
	font-weight:bold;
}
</style>
</head>

<body>
<a href="#">link</a><br/>
<input type="text" name="text1"/><br/>
<textarea name="textarea1"></textarea>
</body>
</html>

显示效果：

 

  • 大小: 1.5 KB
  • 大小: 1.6 KB
分享到：
| 第2章 选择器 =>选择相邻兄弟元素P56
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css的选择器

    本文介绍了CSS中多种类型的选择器，包括类与ID选择器、元素选择器、属性选择器、伪类和伪元素等。通过这些选择器，我们可以精确控制页面的布局和样式，实现复杂的设计效果。掌握这些选择器是成为优秀前端开发人员的...

    HTML5&CSS3网页制作：结构化伪类选择器.pptx

    `:first-child`和`:last-child`选择器分别用于选择父元素的第一个子元素和最后一个子元素。`:first-child`可以用于给列表项的第一项添加特别样式，`:last-child`则可以用于在列表或其他元素结尾添加特殊效果。 `:...

    python爬虫之css选择器

    描述：选择每个`&lt;p&gt;`元素为其父元素的第二个子元素、最后一个子元素、第n个子元素等。 ##### 7. 其他选择器 - **否定选择器**：`:not(selector)` 示例：`:not(p)` 描述：选择不是`&lt;p&gt;`元素的所有其他元素。 - ...

    CSS伪类集合

    CSS伪类是CSS中一种特殊的选择器类型，它们由CSS规范定义并被支持CSS的浏览器自动识别。通过使用这些伪类，开发者能够针对元素的不同状态或者上下文环境应用特定的样式规则。这种机制极大地增强了CSS的表现力和灵活...

    CSS3选择器

    二、多元素的组合选择器 多元素的组合选择器用来选择多个元素。有以下几种： * 多元素选择器（E,F）：同时匹配所有 E 元素或 F 元素 * 后代元素选择器（E F）：匹配所有属于 E 元素后代的 F 元素 * 子元素选择器...

    CSS伪类和伪元素的区别详解

    可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行...

    第03章 常规选择器（4）

    CSS选择器分为几个类别，包括标签选择器、类选择器、ID选择器、属性选择器以及伪类和伪元素选择器。常规选择器主要涵盖这些基础类别。 1. **标签选择器**：通过HTML元素的标签名来选择元素，如`p`、`div`或`h1`等。...

    CSS选择器.txt

    结构性伪类选择器用于根据元素在文档树中的位置来选择元素。 1. **子元素选择器**：`div &gt; p`。选择作为`&lt;div&gt;`的直接子元素的所有`&lt;p&gt;`元素。 2. **相邻兄弟选择器**：`li + li`。选择紧接在另一个`&lt;li&gt;`元素后的`...

    第13章 CSS选择器[下]

    在本章中，我们将深入探讨CSS（层叠样式表）选择器的下半部分，这是Web开发中的关键元素，用于控制网页的布局和样式。CSS选择器是用于选取HTML或XML文档中元素的规则，以便应用样式。理解并熟练掌握各种CSS选择器...

    css伪类伪元素域高级选择器的介绍

    CSS（层叠样式表）是网页设计中用于控制布局和样式的语言。...理解并熟练运用这些伪类和伪元素以及高级选择器，能够大大提高CSS的编写效率和代码的可维护性。在实际的网页设计和开发中，掌握这些技术是至关重要的。

    CSS3选择器教辅.pdf

    例如，“div,p”将同时选择所有的&lt;div&gt;和&lt;p&gt;元素。 3. 后代选择器（elementelement）： - 用于选择元素内部的元素。例如，“divp”会选择所有位于&lt;div&gt;内部的&lt;p&gt;元素。 4. 子选择器（element&gt;element）： - 选择...

    HTML CSS选择器

    &lt;p class="style2"&gt;&lt;em&gt;第二&lt;/em&gt;段样式为style123&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` 在这个例子中，`p.style1 em`表示选择所有具有`class="style1"`的`&lt;p&gt;`元素内部的`&lt;em&gt;`元素，并将其文字颜色设为蓝色。 **应用场景：*...

    第03章 常规选择器 （2）

    最后，伪类和伪元素选择器允许我们在元素的不同状态或特定部分上应用样式。例如，`:hover` 伪类用于当鼠标悬停在元素上时，`:first-child` 伪类选择父元素的第一个子元素，而 `::before` 和 `::after` 伪元素则可以...

    HTML5新增的Css选择器、伪类介绍

    - `:nth-child(odd)` 和 `:nth-child(even)`：这些伪类选择器分别应用于其父元素中索引为奇数和偶数的子元素。这在创建交替颜色效果时非常有用。 示例代码： ```css .test:nth-child(odd) { color: Blue; } ...

    第13章 CSS选择器[上]

    1. **组合器选择器**：包括`descendant`（空格分隔，选择子孙元素），`child`（&gt;`符号，选择直接子元素），`adjacent sibling`（+号，选择紧邻的同级元素）和`general sibling`（~号，选择任意后面的同级元素）。...

    CSS伪类全解析：深入探索选择器的隐藏力量

    ### CSS 伪类全解析：深入探索选择器的隐藏力量 **CSS（Cascading Style Sheets，层叠样式表）**是一种用于描述网页元素样式的语言。它允许网页设计师和开发者控制网页的布局、颜色、字体和其他视觉方面的特性。...

    css+jquery选择器大全

    3. 内容伪元素选择器：如`::first-line`（每个元素的第一行）、`::before`（每个元素的内容之前）、`::after`（每个元素的内容之后）。 四、jQuery选择器 1. 基本jQuery选择器：包括通过标签名、类名、ID以及属性...

    结构伪类选择器（总结）

    **二类选择器：基于元素类型的相对位置** 1. `:first-of-type`：选择其父元素中同类的第一个元素。如果一个元素在所有同类型元素中是第一个，这个选择器就会选中它。 2. `:last-of-type`：选择其父元素中同类的...

Magicbox
Global site tag (gtag.js) - Google Analytics