CSS の旅 (3): 強力な Pseudo-Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の旅 (3): 強力な Pseudo-Selector_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:11 AM

出典: First-line coder

疑似セレクターと言えば、CSS がどれほど強力であるかを実感しました。あまりにも強力なので、もう CSS を認識していないようです。 C# 6.0 の糖衣構文。。。まず、事前に VS でプレビューできます。

ご覧のとおり、上記には非常に多くの疑似クラスがあり、あまりにも多すぎてほとんど目が見えなくなりました。。。以下では、より実践的なものについていくつか説明しましょう。

One:nth-child 擬似セレクター

jquery には、:nth-child、:first-child、:last-child、:only-child、this に対応する「サブクラスセレクター」と呼ばれるセレクターがあることがわかっています。これは CSS でも実行できるため、jquery の負担がある程度軽減されると言えます。以下に簡単な例を示します。

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        ul li:nth-child(1) {            color: red;        }    </style></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul></body>

ログイン後にコピー

:nth-child(1) を入力すると、ul の最初の li の色が赤に変わっていることがわかります。より複雑な場合は、ブラウザーで 1 を n に変更できます。 CSS 疑似クラス

セレクターを解析する場合、対応するメソッドを内部で呼び出して、dom に対応するノードを解析する必要があります。まず、n が 1 のステップサイズで 0 から増加することを理解する必要があります。これはと同じです。 jquery の nth -child も同様です。言うことはありません。次に、first-child と last-child を試してみましょう。

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        ul li:first-child {            color: red;            font-weight:800;        }        ul li:last-child {            color: blue;            font-weight: 800;        }    </style></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul></body></html>

ログイン後にコピー

two :checked, :unchecked,:disabled,:enabled

同様に、jquery には、「フォームオブジェクトプロパティ」と呼ばれる一連のセレクターがあります。jquery のオンラインドキュメントを参照してください。

また、これらの属性が CSS にも存在することを発見して非常に嬉しく思います。。。少し酔い始めていますか？。。まだチラホラ。

1. 無効、有効

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        input[type='text']:enabled {            border: 1px solid red;        }            input[type='text']:disabled {                border: 1px solid blue;            }    </style></head><body>    <form>        <input type="text" disabled="disabled" />        <input type="text"/>    </form></body></html>

ログイン後にコピー

2. チェック済み、未チェック

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        form input[type="radio"]:first-child:checked {            margin-left: 205px;        }    </style></head><body>    <form>        <input class="test" type="radio" value="女" /><span>女</span><br/>        <input class="test" type="radio" value="男" /><span>男</span>    </form></body></html>

ログイン後にコピー

3. 選択済み

これは、以下に示すように、option:checked で置き換えることができます。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        option:checked {            color: red;        }    </style></head><body>    <form>        <select>            <option>1</option>            <option>2</option>            <option>3</option>        </select>    </form></body></html>

ログイン後にコピー

3 つの空の疑似セレクター

このセレクターは、jquery では「コンテンツセレクター」と呼ばれ、空の要素を見つけるために使用されます。

以下は、最初の空の p の背景色を変更する例です。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        p:first-child{            width:500px;            height:20px;        }        p:empty {            background:red;        }    </style></head><body>    <p></p>    <p>他好</p></body></html>

ログイン後にコピー

Four: not(xxx) pseudo-selector

同様に、これも JQuery では「基本セレクター」と呼ばれるものです。 ? ?

一般に、上記を読むと、いくつかの「スクリプト処理動作」が CSS3 に組み込まれているように感じられますか? この感覚は、CSS がかつて知っていた CSS ではなくなっているということです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。