-
-9 28
-
伪类
W3C：“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义（CSS1 还是 CSS2）。
CSS 伪类 (Pseudo-classes)实例
超链接
代码:
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>超链接 2
代码:
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>
<p><b><a class="one" href="/index.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>:first-child（首个子对象）
代码:
<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:none
}
</style>
</head>
<body>
<p>:first-child 伪类向属于其他元素的第一个子元素的一个元素添加特殊样式。</p>
<p>访问 <a href="http://www.w3school.com.cn">W3School</a> 来学习 CSS！
访问 <a href="http://www.w3school.com.cn">W3School</a> 来学习 HTML！</p>
</body>
</html>:lang（语言）
代码:
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
</html>CSS 定位属性 (Positioning)
伪类的语法：
代码:
selector:pseudo-class {property: value}CSS 类也可与伪类搭配使用。
代码:
selector.class:pseudo-class {property: value}锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
代码:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */引用:
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类配合使用：
代码:
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>假如上面的例子中的链接被访问过，那么它将显示为红色。
CSS2 - :first-child 伪类
:first-child 伪类对另一个元素的第一个子元素进行匹配。
例子 1：
在这个例子中，选择器对 div 元素中的第一个子元素为 p 的元素进行匹配 - 对 div 元素内的第一个段落进行缩进：
代码:
div > p:first-child
{
text-indent:25px
}
<div>
<p>div中的第一段。这个段落将被缩进。</p>
<p>div中的第二段。这个段落不会被缩进。</p>
</div>下面的 HTML 中的段落将不会被匹配：
代码:
<div>
<h1>Header</h1>
<p>div中的第一段，但不是div中的第一个子元素。这个段落不会被缩进。</p>
</div>例子 2：
在这个例子中，选择器将对 p 元素中的第一个子元素为 em 的元素进行匹配 - 并且将 p 元素中的第一个 em 元素设置为粗体：
代码:
p:first-child em
{
font-weight:bold
}例如，下面的 HTML 中的 em 是段落的第一个子元素：
代码:
<p>I am a <em>strong</em> man.</p>例子 3：
在这个例子中，选择器将对任何元素的第一个子元素为 a 的元素进行匹配 - 将 text-decoration 属性设置为 none：
代码:
a:first-child
{
text-decoration:none
}例如，下面的 HTML 中的第一个 a 元素是段落中的第一个子元素，所以没有下划线。
但是第二个 a 不是段落的第一个子元素，所以有下划线。
代码:
<p>访问<a href="http://www.w3school.com.cn">W3School</a>学习CSS！
访问<a href="http://www.w3school.com.cn">W3School</a>学习HTML！</p>CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
代码:
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
- 评论(1)
发表评论 TrackBack