CSS疑似クラスセレクター

无忌哥哥
リリース: 2018-06-28 17:16:14
オリジナル
1891 人が閲覧しました

选择 CSS 疑似デバイス

/*要素セレクター*/


Ul {

padding: 0;

width: 450px;

Border: 1px 破線 #666;

パディング: 10px 5px;

}

ul:after { /*子ブロックが親ブロックを開きます*/

content:'' /*子要素の最後に空のコンテンツ要素を追加します*/

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 の

のみが選択されます。

/*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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート