CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中，连接的不一样状态均可以不一样的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a:link {color: #FF0000} /* 未访问的连接 */a:visited {color: #00FF00} /* 已访问的连接 */a:hover {color: #FF00FF} /* 鼠标移动到连接上 */a:active {color: #0000FF} /* 选定的连接 */###########伪类W3C："W3C" 列指示出该属性在哪一个 CSS 版本中定义（CSS1 仍是 CSS2）。属性 描述 CSS:active 向被激活的元素添加样式。 1:focus 向拥有键盘输入焦点的元素添加样式。 2:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1:link 向未被访问的连接添加样式。 1:visited 向已被访问的连接添加样式。 1:first-child 向元素的第一个子元素添加样式。 2:lang 向带有指定 lang 属性的元素添加样式。 2#####################1.超连接本例演示如何向文档中的超连接添加不一样的颜色。 <style type="text/css"> a:link {color:#0000FF} a:visited{color:#00FF00} a:hover{color:#FF00FF} a:active{color:#0000FF} </style></head><body><p><b><a href="test1.html" target="_blank">这是一个连接</a></b></p><p><b>注释：</b>在定义中，a:hover必须位于a:link 和 a:visited 以后，这样才能生效！</p><p><b>注释：</b>在Css定义中， a:active 必须位于a:hover 以后，这样才能生效！</p>2.超连接 2本例演示如何向超连接添加其余样式。 <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{color:#ffcc00;underline;} </style></head><body><p>请把鼠标移动到这些连接上，以查看效果：</p><p><b><a class="one" href="test1.html" target="_blank">这个连接改变颜色</a></b></p><p><b><a class="two" href="test1.html" target="_blank">这个连接改变字体大小</a></b></p><p><b><a class="three" href="test1.html" target="_blank">这个连接改变背景颜色</a></b></p><p><b><a class="four" href="test1.html" target="_blank">这个连接改变字体系列</a></b></p><p><b><a class="five" href="test1.html" target="_blank">这个连接改变文本装饰</a></b></p></body>3.超连接：:focus 的使用本例演示如何使用 :focus 伪类（没法在 IE 中工做）。 <style type="text/css"> input:focus{ } </style></head><body><form action="test1.html" method="get"> First name:<input type="text" name="fname" /><br/> Last name:<input type="text" name="lname" /><br/> <input type="submit" value="Submit" /></form><p><b>注释：</b>若是已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p></body>4.:first-child（首个子对象）本例演示 :first-child 伪类的用法。 <style type="text/css"> p:first-child{font-weight:bold;} li:first-child{text-transform: uppercase;} </style></head><body><div> <p>These are the necessary steps:</p> <ul> <li>Intert key</li> <li>Turn key<strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> Push the</p></div>
相关文章
- 1. CSS伪类的实例
- 2. CSS伪类
- 3. CSS :focus 伪类
- 4. css之伪类
- 5. CSS :active 伪类
- 6. css 伪类
- 7. css伪类和伪元素
- 8. CSS——伪类
- 9. CSS伪类和伪元素
- 10. CSS 伪类与伪元素
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • XML 实例 - XML 教程
- • Kotlin学习（二）基本类型
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. CSS伪类的实例
- 2. CSS伪类
- 3. CSS :focus 伪类
- 4. css之伪类
- 5. CSS :active 伪类
- 6. css 伪类
- 7. css伪类和伪元素
- 8. CSS——伪类
- 9. CSS伪类和伪元素
- 10. CSS 伪类与伪元素