W3School-CSS 疑似クラス (疑似クラス) example_html/css_WEB-ITnose-htmlチュートリアル-php.cn

W3School-CSS 疑似クラス (疑似クラス) example_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:28:38

オリジナル

1363 人が閲覧しました

CSS疑似クラスインスタンス

CSSインスタンス

CSS背景インスタンス

CSSテキストインスタンス

CSSフォントインスタンス

CSSボーダーインスタンス

CS S margin ) Example

CSSパディングの例

CSSリストの例

CSSテーブル例

アウトライン例

CSSディメンション例

CSS分類例

CSS位置決め（Positioning）インスタンス

CSS疑似クラスインスタンス

CSS疑似要素インスタンス

01ハイパーリンク

すごい

02ハイパーリンク 2

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>01超链接</title>        <style type="text/css">            body {                background-color: #99CCFF;            }            a:link {                color: #CCCCCC;            }                        a:visited {                color: #666666;            }                        a:hover {                color: #ffffff;            }                        a:active {                color: #999999;            }        </style>    </head>    <body>        <p><b><a href="https://www.baidu.com/" 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>        <img src="love.jpg">    </body></html>

ログイン後にコピー

03ハイパーリンク: :focus

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>02超链接2</title>        <style type="text/css">            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;}                        </style>    </head>    <body>        <p><b><a class="one" href="https://www.baidu.com/" target="_blank">改变颜色</a></b></p>        <p><b><a class="two" href="https://www.baidu.com/" target="_blank">改变字体大小</a></b></p>        <p><b><a class="three" href="https://www.baidu.com/" target="_blank">改变背景颜色</a></b></p>         <p><b><a class="four" href="https://www.baidu.com/" target="_blank">As a man thinketh in his heart so is he！改变字体</a></b></p>        <p><b><a class="five" href="https://www.baidu.com/" target="_blank">改变文本装饰</a></b></p>    </body></html>

ログイン後にコピー

の使用

04 :first-child (最初の子オブジェクト)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>03超链接：:focus 的使用</title>        <style type="text/css">            input:focus {                background-color: #ccc;            }        </style>    </head>    <body>        <form>            <p>First name:                <input type="text" />            </p>            <p>Last name:                <input type="text" />            </p>            <p>                <input type="submit" value="Submit" />            </p>        </form>    </body></html>

ログイン後にコピー

05 :lang (言語)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>04:first-child（首个子对象）</title>        <style type="text/css">            p:first-child {                color: green;            }                        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 brake at the same time as the accelerator.</p>        </div>    </body></html>

ログイン後にコピー