マジカル CSS3 selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

マジカル CSS3 selector_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

私は長年庭に携わっていますが、ブログを書いたことはありません。基本的なことを書きたい場合は、css3 セレクターから始めましょう。

Css3 Selector

まず、セレクターの使用を推奨する理由について話しましょう。

セレクターを使用すると、スタイルを要素に直接バインドでき、どのスタイルがスタイルシート内のどの要素に一致するかが一目でわかり、変更も簡単です。
スタイルシートのコードの量を減らします。

属性セレクター

1.[att*=val] 属性セレクター

意味: 要素の att で表される属性の属性値に val で表される文字が含まれる場合、要素はこれを使用します。 style

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id*=demo]        {            width: 100px;            height: 100px;            background-color: #000099;        }    </style></head><body><div id="demo"></div></body></html>

ログイン後にコピー

2. [att^=val] 属性セレクター

意味：要素の att で表される属性の属性値が val で表される文字列で始まる場合、要素はこのスタイルを使用します。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id^=demo]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demo1"></div></body></html>

ログイン後にコピー

3. [att$=val] 属性セレクター

意味: att で表される属性の属性値が val で表される文字列で終わる場合、要素はこのスタイルを使用します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id$=o]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>

ログイン後にコピー

構造擬似クラスセレクター

擬似クラスセレクターは定義されたセレクターを指し、気軽に名前を付けることはできません。

例: a:link,a:visited,a:hover,a:active.

擬似要素セレクターとは、要素に対して定義されたセレクターを指します。

最初の行の疑似要素セレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-line       {           color: red;       }    </style></head><body>  <p>      hello world      <br/>      你好  </p></body></html>

ログイン後にコピー

2.最初の文字の疑似要素セレクター

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-letter       {           color: red;       }    </style></head><body>  <p>      hello world  </p>  <p> 你好</p></body></html>

ログイン後にコピー

<strong>befor伪元素选择器</strong>

ログイン後にコピー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:before       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

ログイン後にコピー

擬似要素セレクター後

rree

ルートセレクター

ルートセレクターは、スタイルをページのルート要素にバインドします。使用時: ルート要素とボディ要素の背景、条件によって表示効果が異なります

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:after       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

ログイン後にコピー

not selector

要素を使用しないように構造要素の下にある部分構造要素を除外します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       :root       {           background-color: #003300;       }        body        {            background-color: yellow;        }    </style></head><body><p>你好</p></body></html>

ログイン後にコピー

empty selector

要素の内容が空の場合に使用されるスタイル。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        body *:not(h1)        {            background-color: yellow;        }    </style></head><body><h1>大家好</h1><p>你好</p></body></html>

ログイン後にコピー

ターゲットセレクター

ターゲットセレクターを使用して、ページ内のターゲット要素にスタイルを適用します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        td:empty        {            background-color: yellow;        }    </style></head><body><table border="1">    <tr>        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px"></td>    </tr></table></body></html>

ログイン後にコピー

最初の子、最後の子セレクター

最初の子要素と最後の子要素を指定します子要素のスタイル

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        :target        {            background-color:yellow;        }    </style></head><body><table border="1">   <a href="#text3">示例1</a>    <div id="text1">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text2">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text3">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div></table></body></html>

ログイン後にコピー

nth-child, nth-last-child selector

親要素内で指定されたシーケンス番号を持つ子要素のスタイルを指定します。

Nth-child(even) を使用して偶数番号の要素のスタイルを指定し、Nth-child(odd) を使用して奇数番号の要素のスタイルを指定することもできます

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:first-child       {           background-color: yellow;       }        li:last-child        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

ログイン後にコピー

nth-of-type nth-last -of-type selector

これら 2 つのセレクターは、nth-child セレクターと nth-last-child セレクターの欠点を補うもので、類似した要素のスタイルのみを指定します。

UI要素ステータスセレクター

E:horver,E:active,E:focusセレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:nth-child(2)       {           background-color: yellow;       }        li:nth-last-child(2)        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

ログイン後にコピー

E:enabled,E:disabled,E:read-only,E:read-Writeセレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        input[type="text"]:hover        {            background-color: yellow;        }        input[type="text"]:focus        {            background-color: green;        }        input[type="text"]:active        {            background-color: red;        }    </style></head><body><input type="text" name="name"></body></html>

ログイン後にコピー

E: チェック、E: DEFAULT セレクター

e: Checked はチェックボックスのスタイルを指定します

e:default はデフォルトの選択ボックスのスタイルを指定します

E::selection セレクター

要素選択時のスタイルを指定

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        input[type="text"]:disabled        {            background-color: green;        }        input[type="text"]:read-only        {            background-color:darkgrey;        }    </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html>

ログイン後にコピー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        p::selection        {            background-color: goldenrod;        }    </style></head><body> <p>测试测试</p></body></html>

ログイン後にコピー

🎜🎜🎜 🎜🎜🎜🎜🎜

このウェブサイトの声明

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