ホームページ > 記事 > ウェブフロントエンド > CSS疑似クラスセレクター
CSS疑似クラスセレクター
- 无忌哥哥オリジナル
- 2018-06-28 17:16:141765ブラウズ
选择 CSS 疑似デバイス
/*要素セレクター*/ul:after { /*子ブロックが親ブロックを開きます*/
display: block ; /*ブロックレベルの表示に設定*//*visibility: none; /*height: 0 ;*//*_height: 1%; !*IE の場合*!*/}li { list-style: none; /*デフォルトのリスト項目スタイルを削除します*/ float: left; /*左浮動小数点数*/width: 40px; /*幅を設定*/line-height: 40px; /*テキストを垂直方向に中央揃えにする*/text-align: center; / *テキストを水平方向に中央揃えにします*/border-radius: 50%; /*境界線の角を丸く設定します*/background: skyblue; /*背景色をスカイブルーにします*/
margin-right: 5px; /**/} 間の各ボールの右マージン/*:before: 指定されたセレクターの前に挿入します。デフォルトはインライン要素です*/ul:before {/*テキストを挿入します*/ content: 'PHP 中国語 Web サイト'; /*ブロック要素に変換*/ display: block; }ul:before {/*ブロック要素に変換*/display: block; /*content: url(. ./html/images/5.jpg) ;*/ /*content: ''; */ /*画像が背景として設定されている場合のみサイズを設定できます*/ /*background-画像: url(../html/images/5.jpg );*/ /*背景サイズ:100px 100px;*/ /*高さ: 100px *//*幅: 100px;* /}/*:after: 指定された要素の後に要素を追加します。デフォルトではインライン要素になります。テキスト、画像、ビデオなども可能です*/ul:after {/*content:'www.php.cn ';*//*color:red;*/} /*:first-child: 親要素の最初の子要素を選択します*//*注: 現在の要素には ul 要素が 1 つだけありますページにあるため、親 ul は省略できます*/ul li:first-child {background-color: Brown;}/*:last-child: 親要素内の最初の子要素を選択します*/
ul li:last-child {background-color: lightgreen;} /*:only-child: 現在の親要素内の唯一の子要素を選択します */
p:only-child {/*2 つの div のうち、最初の div のみが含まれ、最初の div の e388a4556c0f65e1904146cc1a846bee のみが選択されます。
/*color:red;*/}
/*only-of-type: 親要素を選択します。only-child の下にある唯一の
要素は、子要素 (タグname) を指定します*/
p:only-of-type {
/*最初に上記のみを変更します。実行後、子であるため、3 番目の div の p も選択されることがわかります。 p 型が指定された子要素のみ */
color:red;}
only-child とonly-of -type:
1 の違い: 共通点: どちらも親要素内の唯一の子要素を選択します。
2. 違い:only-child は子要素の型を制限しませんが、only-of-type は子要素を制限します。たとえば、p タグである必要があります
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.伪类选择器</title> </head> <body> <ul> <li id="item1">1</li> <li>2</li> <li class="green red">3</li> <li>4</li> <li>5</li> <li id="item2">6</li> <li>7</li> <li class="php css">8</li> <li>9</li> <li>10</li> </ul> <div> <p>我是当前div元素中的唯一子元素</p> </div> <div> <p>我是当前div元素中的第一个子元素</p> <p>我是当前div元素中的第二个子元素</p> </div> <div> <p>我虽然是div下唯一的类型为p的子元素</p> <h4>我是div下的另一个子元素h4</h4> </div> </body> </html>
以上がCSS疑似クラスセレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：css属性セレクターの例次の記事：css属性セレクターの例