CSS疑似クラス
CSS 疑似クラス
CSS 疑似クラスは、セレクターに特殊効果を追加するために使用されます。
構文
疑似クラスの構文:
selector:pseudo-class {property:value;}
CSS クラスは疑似クラスも使用できます:
selector.class:pseudo-class { property: value;}
anchor pseudo-class
CSSをサポートするブラウザでは、リンクのさまざまな状態をさまざまな方法で表示できます
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
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 */
</style>
</head>
<body>
<p><b><a href="http://www.php.cn/css/css-css_tutorial.html" 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>インスタンスの実行»
「実行」をクリックInstance" " ボタンをクリックすると、オンラインの例が表示されます
注: 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 .html">CSS 構文</a>
<a class="red" href="css-syntax .html">CSS 構文</a>
上記の例のリンクにアクセスしたことがある場合は、赤色で表示されます。
CSS - :first - child 擬似クラス
:first-child 擬似クラスを使用すると、要素の最初の子要素を選択できます
注: 以前のバージョンの IE8 では、<!DOCTYPE> ; このように宣言する必要があります: first-child が有効になります。
最初の <p> 要素と一致します
以下の例では、セレクターは任意の要素の最初の子である <p> 要素と一致します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>実行例 »
[例の実行] ボタンをクリックして、オンラインの例を表示します
最初の <i> 要素に一致するすべての <p> 要素を一致させます
以下の例では、最初の <p> に一致するすべての <p> を選択します要素の ;i> 要素:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>サンプルの実行»
オンラインサンプルを表示するには、[インスタンスの実行] ボタンをクリックしてください
最初の子要素であるすべての <p> と一致します; すべての <i> 要素内の要素
以下の例では、セレクターは、要素の最初の子である <i> 要素内のすべての要素と一致します。
サンプルの実行»
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
CSS - :lang pseudo-class
:lang pseudo-class を使用すると、さまざまな言語の特別なルールを定義できます。
注: IE8 は、;lang 疑似クラスをサポートするために <!DOCTYPE> を宣言する必要があります。
次の例では、:lang クラスは、属性値 no を持つ q 要素の引用符のタイプを定義します:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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 Instance»
[Run Instance] ボタンをクリックして表示します。オンライン例
その他の例
例: ハイパーリンクにさまざまなスタイルを追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>実行例»
オンライン例を表示するには、[例を実行] ボタンをクリックしてください
この例は、次のことを示していますハイパーリンクを追加する方法 その他のスタイル。
インスタンス: :focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>を使用してインスタンスを実行します »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
この例は、:focus 疑似クラスの使用方法を示しています。
すべてのCSS疑似クラス/要素
| selector | 例 | 例の説明 |
|---|---|---|
| :checked | input:checked | 選択されたすべてのフォーム要素を選択します |
| :無効化されました | input:disabled | 無効なフォーム要素をすべて選択します |
| :empty | p:empty | 子要素のないすべてのp要素を選択します |
| :enabled | input:有効 | 選択有効なすべてのフォーム要素 |
| :first-of-type | p:first-of-type | p 要素である各親要素の最初の p 子要素を選択します |
| :in-range | input:in-range | 要素の指定範囲内の値を選択します |
| :invalid | input:invalid | 無効な要素をすべて選択します |
| :last-child | p :last-child | すべての p 要素の最後の子要素を選択します |
| :last-of-type | p:last-of-type | は、親要素の最後のすべての p 要素を選択しますp 要素 |
| :not(selector) | :not(p) | は p 以外のすべての要素を選択します |
| :nth-child(n) | p:nth-child( 2) | すべての p 要素の 2 番目の子要素を選択します |
| :nth-last-child(n) | p:nth-last-child(2) | すべての最後から 2 番目の子要素を選択しますp要素 子要素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | すべてのp要素に対して、pの最後から2番目の子要素を選択する |
| :nth-of-type(n) | p:nth-of-type(2) | 2 番目の子要素が p |
| :only-of-type である p 要素をすべて選択します | p:only-of-type | 子要素が 1 つだけある要素をすべて選択 p |
| :only-child | p:only-child | 子要素が 1 つだけある要素をすべて選択 p 要素 |
| :optional | input:optional | 必須なしの要素属性を選択 |
| :out-of-range | input:out-of-range | 指定範囲外の値を選択 要素属性 |
| :read-only | input:read-only | 読み取り専用属性を持つ要素を選択する |
| :read-write | input:read-write | 読み取り専用属性を持たない要素を選択する 属性 |
| :required | input:required | 「required」属性で指定された要素を選択します。 属性 |
| :root | root | ドキュメントのルート要素を選択します |
| :ターゲット | #news:target | 現在アクティブな #news 要素を選択します (クリック URL にはアンカーの名前が含まれます) |
| :valid | input:valid | 有効な値を持つすべての属性を選択します |
| :リンク | a:リンク | 未訪問のリンクをすべて選択 |
| :訪問済み | a:訪問済み | 訪問済みのリンクをすべて選択 |
| :active | a:アクティブ | アクティブリンクを選択 |
| :hover | a:hover | リンク上にマウスを置いた状態 |
| :focus | input:focus | 入力後に選択された要素にフォーカスが付いています |
| P：First-letter | はそれぞれの最初の文字を選択します＆lt; p＆gt：first-line | p：first-line |
| :first-child | p:first-child | |
| :前 | p:before | 各 <p> 要素の前にコンテンツを挿入します |
| :after | p:after | 各 <p> 要素の後にコンテンツを挿入します |
| : 言語) | p:lang(it) | <p> 要素の lang 属性の開始値を選択します |
