小白教程
所有教程
关于
Search
172.70.126.233
172.70.126.233
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 伪类”的源代码
本页内容
上一节:
CSS_布局_–_水平_&_垂直对齐
下一节:
CSS_伪元素
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 伪类}}[[Category:CSS 教程|25]] = CSS 伪类(Pseudo-classes) = CSS伪类是用来添加一些选择器的特殊效果。 == 语法 == 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} == anchor伪类 == 在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 <sample title="" desc="" lang="html" hererun="1"> a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body> <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p> <p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p> <p><b>注意:</b> a:active 必须在 a:hover 之后。</p> </body> </html> </run> '''注意:''' 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 '''注意:''' 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 '''注意:'''伪类的名称不区分大小写。 == 伪类和CSS类 == 伪类可以与 CSS 类配合使用: <sample title="" desc="" lang="html" hererun="1"> a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS 语法</a> </sample> 如果在上面的例子的链接已被访问,它会显示为红色。 == CSS :first-child 伪类 == 您可以使用 :first-child 伪类来选择父元素的第一个子元素。 '''注意:'''在IE8的之前版本必须声明[[tag doctype|<!DOCTYPE>]] ,这样 :first-child 才能生效。 == 匹配第一个 <p> 元素 == 在下面的例子中,选择器匹配作为任何元素的第一个子元素的 <p> 元素: <sample title="" desc="" lang="html" hererun="1"> p:first-child { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:first-child { color:blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, !DOCTYPE 必须已经声明.</p> </body> </html> </run> == 匹配所有<p> 元素中的第一个 <i> 元素 == 在下面的例子中,选择相匹配的所有<p>元素的第一个 <i> 元素: <sample title="" desc="" lang="html" hererun="1"> p > i:first-child { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p > i:first-child { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, !DOCTYPE 必须已经定义.</p> </body> </html> </run> == 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素 == 在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素: <sample title="" desc="" lang="html" hererun="1"> p:first-child i { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:first-child i { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p> </body> </html> </run> == CSS - :lang 伪类 == :lang 伪类使你有能力为不同的语言定义特殊的规则 '''注意:'''IE8必须声明[[tag doctype|<!DOCTYPE>]]才能支持;lang伪类。 在下面的例子中,:lang 类为属性值为 no 的q元素定义引号的类型: <sample title="" desc="" lang="html" hererun="1"> q:lang(no) {quotes: "~" "~";} </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> <p>在这个例子中,:lang定义了q元素的值为lang =“no”</p> <p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p> </body> </html> </run> == 更多实例 == [[try.php?filename=trycss_link2|为超链接添加不同样式]] 这个例子演示了如何为超链接添加其他样式。 [[try.php?filename=trycss_link_focus|使用 :focus]] 这个例子演示了如何使用 :focus伪类。 == 所有CSS伪类/元素 == {| class="table table-striped table-hover" ! 选择器 ! 示例 ! 示例说明 |- | [[sel checked|:checked]] | input:checked | 选择所有选中的表单元素 |- | [[sel disabled|:disabled]] | input:disabled | 选择所有禁用的表单元素 |- | [[sel empty|:empty]] | p:empty | 选择所有没有子元素的p元素 |- | [[sel enable|:enabled]] | input:enabled | 选择所有启用的表单元素 |- | [[sel first of type|:first-of-type]] | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |- | [[sel in range|:in-range]] | input:in-range | 选择元素指定范围内的值 |- | [[sel invalid|:invalid]] | input:invalid | 选择所有无效的元素 |- | [[sel last child|:last-child]] | p:last-child | 选择所有p元素的最后一个子元素 |- | [[sel last of type|:last-of-type]] | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |- | [[sel not|:not(selector)]] | :not(p) | 选择所有p以外的元素 |- | [[sel nth child|:nth-child(n)]] | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |- | [[sel nth last child|:nth-last-child(n)]] | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |- | [[sel nth last of type|:nth-last-of-type(n)]] | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |- | [[sel nth of type|:nth-of-type(n)]] | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |- | [[sel only of type|:only-of-type]] | p:only-of-type | 选择所有仅有一个子元素为p的元素 |- | [[sel only child|:only-child]] | p:only-child | 选择所有仅有一个子元素的p元素 |- | [[sel optional|:optional]] | input:optional | 选择没有"required"的元素属性 |- | [[sel out of range|:out-of-range]] | input:out-of-range | 选择指定范围以外的值的元素属性 |- | [[sel read only|:read-only]] | input:read-only | 选择只读属性的元素属性 |- | [[sel read write|:read-write]] | input:read-write | 选择没有只读属性的元素属性 |- | [[sel required|:required]] | input:required | 选择有"required"属性指定的元素属性 |- | [[sel root|:root]] | root | 选择文档的根元素 |- | [[sel target|:target]] | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |- | [[sel valid|:valid]] | input:valid | 选择所有有效值的属性 |- | [[sel link|:link]] | a:link | 选择所有未访问链接 |- | [[sel visited|:visited]] | a:visited | 选择所有访问过的链接 |- | [[sel active|:active]] | a:active | 选择正在活动链接 |- | [[sel hover|:hover]] | a:hover | 把鼠标放在链接上的状态 |- | [[sel focus|:focus]] | input:focus | 选择元素输入后具有焦点 |- | [[sel firstletter|:first-letter]] | p:first-letter | 选择每个<p> 元素的第一个字母 |- | [[sel firstline|:first-line]] | p:first-line | 选择每个<p> 元素的第一行 |- | [[sel firstchild|:first-child]] | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |- | [[sel before|:before]] | p:before | 在每个<p>元素之前插入内容 |- | [[sel after|:after]] | p:after | 在每个<p>元素之后插入内容 |- | [[sel lang|:lang(language)]] | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |}
返回至“
CSS 伪类
”。
上一节:
CSS_布局_–_水平_&_垂直对齐
下一节:
CSS_伪元素