好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

W3School-CSS伪类(Pseudo-classes)实例_html/css_WEB-ITno

CSS 伪类 (Pseudo-classes) 实例

CSS 实例

CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓(Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-classes)实例 CSS 伪元素 (Pseudo-elements)实例 01超链接
                         01超链接                      body {                background-color: #99CCFF;            }            a:link {                color: #CCCCCC;            }                        a:visited {                color: #666666;            }                        a:hover {                color: #ffffff;            }                        a:active {                color: #999999;            }                           

百度首页

注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

注释:在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!

02超链接2
                         02超链接2                      body {                background-color: #99ccff;            }            a.one:link {color: #666;}            a.one:visited {color: #333;}            a.one:hover {color: #ffffff;}                        a.two:link {color: #666;}            a.two:visited {color: #333;}            a.two:hover {font-size: 150%;}                        a.three:link {color: #666;}            a.three:visited {color: #333;}            a.three:hover {background-color: #CCCCCC;}                            a.four:link {color: #666;}            a.four:visited {color: #333;}            a.four:hover {font-family: monospace;}                            a.five:link {color: #666;text-decoration: none;}            a.five:visited {color: #333;text-decoration: none;}            a.five:hover {text-decoration: underline;}                                           

改变颜色

改变字体大小

改变背景颜色

As a man thinketh in his heart so is he!改变字体

改变文本装饰

03超链接::focus 的使用
                         03超链接::focus 的使用                      input:focus {                background-color: #ccc;            }                                  

04 :first-child(首个子对象)
                         04:first-child(首个子对象)                      p:first-child {                color: green;            }                        li:first-child {                text-transform: uppercase;            }                           

These are the necessary steps:

Intert Key Turn key clockwise Push accelerator

Do not push the brake at the same time as the accelerator.

查看更多关于W3School-CSS伪类(Pseudo-classes)实例_html/css_WEB-ITno的详细内容...

  阅读:36次